Radio - Usage

Basic Guidelines

• As a best practice, one Radio is already selected by default. We recommend using the most desired or frequently selected option as the default.

• In some situations it is acceptable to not provide a default selection, for example, when the user is required to make a conscious choice, or if a preselection would be presumptuous or alienating.

Copy

• The list of options should be structured in a logical order, from simplest operation to most complex, or least risk to most.

• Options should be comprehensive and clearly distinct, using unambiguous vocabulary and context.

• In-line messaging is optional and used for additional context on the option.

Behaviour

• Clicking an unselected Radio will deselect whatever other Radio was previously selected from the list.

• The whole Radio item (Radio button + label) is used as the clickable area.

• The user may be unable to submit the form, if no item has been selected. Error variants are available to indicate a necessary selection. Any required error messages will be displayed in a separate control field, which is its own component.

Variants Usage

Error Variant

The error variant is only necessary in the rare case when there is not default selection provided and the form can’t be submitted without the user having made a choice. The Control Field component is used to display the error message.

In case of an error, all Radios change their state accordingly.

Disabled and Read-only – What’s the difference?

Visually the Disabled and Read-only input fields look exactly the same, but their properties in the final product will differ. Here is a quick comparison:

Disabled

Attributes:

• No tab stop
• Not focusable

Use Case:
This is an intermediate state while the form is being submitted, and would only ever be used if that state is shown in the prototype. It is generally not recommended to use this state for designs.

Read-only

Attributes:

• Tab stop
• Focusable

Use Case:
When presenting the selection in a previously submitted form. Users with screen readers can listen to this information.

Alignment

Stacking Radio items vertically is recommended, as horizontal items are difficult to scan.

A 16px gap between items ensures that each item has an accessible click area.

The Radio component must align with the grid system set out in Foundations. It sits in-line with the rest of the text.

In a 12-column grid layout, the Radio component sits left-aligned within the six centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.