About

Anatomy

Radio group

A Radio group may consist of:

1. Group label
2. Two to seven radio buttons
3. Hint text (optional)
4. Indicator (optional)
5. Help icon (optional)
6. Error text (optional)

Radio button

In order to create a Radio group, radio buttons are required. Radio buttons are never used on their own, so the Riverty Design System does not provide a standalone Radio button component. However, the anatomy of a radio button is specified as follows:

1. Label
2. Radio border
3. Select indicator
4. Container border (optional)
5. Leading slot (optional)
6. Trailing slot (optional)
7. Sub text (optional)

When to use

Use a Radio group when:

• Users need to be able to select one of up to preferably seven options that are similar to each other;
• There’s enough space to allow for a Radio group;
• There’s a need for a sub text (we do not have this option in the Select component).

When not to use

Do not use a Radio group when:

• Users can select multiple options. Use a Checkbox group component instead.
• Users can select from more than seven options and you have limited space. Use a Select component instead. The advantage of showing a radio group is that users see all options in one glance without extra clicks, which allows for easy comparison.

Variants

There are two variants of Radio buttons:

• Standard radio buttons: without a border;
• Contained radio buttons: with a border.

Status

A Radio group can have an error status. In that case the following will appear:

• The borders of all radio buttons within the group will get a regular error status color, and the backgrounds a soft error status color.
• An error text will appear below the radio buttons.

Behaviour

States

• A Radio button comes with the following states: Enabled, Hovered, Activated, Focused.
• A Radio group comes with the following state: Disabled. Hence, a Radio group can get an Error status (see above).

Default selection

A default selection is preferred, especially when we know the (preferred) choice of the majority of the users.

• This will reduce interactions and therefore speed up the process.
• This can guide users to choose an option or several options.
• If we do this consistently, they know that they can expect default selections for all Radio groups (e.g., in a form).

Keyboard behaviour

The keyboard behaviour follows the pattern from W3C patterns: https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/

Tab

• Moves focus to checked radio button in the Radio group.
• If a radio button is not checked, focus moves to the first radio button in the group.

Space

• If the radio button with focus is not checked, changes the state to checked.
• Otherwise, does nothing.
• Note: The state where a radio is not checked only occurs on page load.

Down arrow, right arrow

• Moves focus to and checks the next radio button in the group.
• If focus is on the last radio button, moves focus to the first radio button.
• The state of the previously checked radio button is changed to unchecked.

Up arrow, left arrow

• Moves focus to and checks the previous radio button in the group.
• If focus is on the last radio button, moves focus to the last radio button.
• The state of the previously checked radio button is changed to unchecked.

Content

Icons and logos in leading slot

We recommend to either use a leading slot with icons and logos for all of the radio buttons, or no leading slot at all. The reason for this is that the labels will be aligned when using a leading slot for all of the radio buttons.

Text in trailing slot

The trailing slot can be used to add text to. For example, an amount can be added there. If possible, add text in trailing slots for all radio buttons in the list or for none. This way users with screen readers know the difference right away as well.

Nesting components

A Radio button can use:
-

A Radio button can be used in:
-

Resources

• Checkboxes vs. Radio Buttons
• Radio Buttons: Select One by Default or Leave All Unselected?