Radio

Radio buttons allow users to select a single item from a list.

When to use

Single selection

Use radio buttons to restrict users to only being able to choose a single item

Single selection

Use radio buttons to restrict users to only being able to choose a single item

Single selection

Use radio buttons to restrict users to only being able to choose a single item

Scannable lists

Use radio groups to show users all the options that are available to choose from all at once

Scannable lists

Use radio groups to show users all the options that are available to choose from all at once

Scannable lists

Use radio groups to show users all the options that are available to choose from all at once

When to avoid

Too many options

For cases requiring more than 8 items in the list, consider using a selectable dropdown menu in a form setting

Too many options

For cases requiring more than 8 items in the list, consider using a selectable dropdown menu in a form setting

Too many options

For cases requiring more than 8 items in the list, consider using a selectable dropdown menu in a form setting

Specifications

Label placement

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

Stacked

The stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left to Right

Please note the wrapping and truncation rules for the left to right version and how the "Optional" label is below the label.

States

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Enabled Selected

Disabled Selected

Enabled Unselected

Disabled Unselected

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Group

A radio group must include two or more items for a proper selection. By default, it's best practice to always have the top radio button in a group selected. For progressive disclosure forms, always display a radio group with no radio items selected.

Value

Radio