Guidelines
Guidelines
Usage
A Radio is always used inside a group of two or more Radios, allowing users to select one single option.
A group of Radios should:
- Have less than 6 options that are mutually inclusive. If there are more options, consider using a Select.
- List options in a rational order that makes logical sense.
- Have comprehensive and distinct options.
- Have only one option checked at a time.
- Have one option checked by default.
- List options vertically, making the options more distinguishable.
- Always have a flat hierarchy, as nesting Radios is not following common design standards and add unnecessary complexity.
- Have its hit area increased to cover the entire row when used in a group inside a container. This allows a quicker and easier selection of options without worrying about the label lengths.
Radio vs. Checkbox
Follow common design standards when using Radio or Checkbox, as this will enhance a user's experience when selecting preferred options.
A Radio should:
- Be used for option lists with 6 or fewer options.
- Allow to select exactly one option.
A Checkbox should:
- Be used for option lists with 6 or fewer options, where a user can select more than one option.
- Allow to select any number of options, including zero, one, or several.
- Have a single option when used standalone. The user can turn it on or off.
States
A Radio's state changes when the user engages with it.
A Radio should:
- Always update the checked state accordingly when a user interacts with the component. When checked , the Radio is the only selected option among its group.
- Use disabled when the Radio is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.
- Use disabled instead of being hidden, as this avoids surprising the users when the Radio is suddenly shown. Furthermore, it avoids users having to make selections without all options being available.
- Only automatically focus the Radio on page load when a user expects it. With autofocus assigned, a screen reader immediately directs users to the form control without warning them.
Label
A Radio's label communicates the option that will be set when the user engages with it.
A label should:
- Use affirmative language to indicate to a user what will happen when they select the Radio rather than informing them about what won't happen.
- Use sentence-case for optimal readability.
- Use clamp to force it into a single line when needed, while always ensuring that the visible part of the label still conveys the meaning of the option.
- Never include interactive elements like a link or button as they are considered inaccessible by assistive technologies. Instead, contextual information that can include links and buttons should be displayed next to a Radio.
Help text
A Radio Group's help-text provides extra guidance or instructions to the user. It can also clarify how the information will be used.
A help-text should:
- Be used when extra guidance or instructions are beneficial.
- Be supplementary to the Radio Group's label, not repeating it.
- Use sentence-case for optimal readability.
Prefix
A Radio can set a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as flags or thumbnails.
A prefix should:
- Always be used in combination with a label.
- Use a maximum size of 24 x 24 pixels.
- Use only one single non-interactive element.
- Be uniform in size and ratio.
- Use the same color as the label when it is an Icon.
- Never be embedded through an iframe.
- Use the same kind of prefix like all other options inside the same group, as consistent usage of prefixes across a group of Radios gains a persistent and equal representation of options.
🎨 How to implement a prefix in Figma
Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.
Form Validation
A Radio should:
- Be set to required if entering information is required to submit a form.
- Be marked as “Required” when the majority of the fields in the same form are optional.
- Be marked as "Optional" when the majority of the fields in the same form are required.
- Update its validation state when the form is submitted. And after submitting as soon as the user interacts with the component.
- Have a validation message that is supplementary to the Radio Group's label and help-text without repeating them.
- Instruct how to avoid possible errors with a validation message.
- Have the validation message be as short and clear as possible.
Accessibility
A Radio should:
- Set a contrasting appearance based on the environment it's used in. Use light appearance in dark environments and vice versa.