Radio button

Best practices

The fastest way to insert a set of radio buttons, is by using the Radio group component. It has built-in support for up to 5 radio buttons controls, a group label and handles both stacked and inline alignment.

For special cases requiring more manual control, the Radio button control component can be used directly.

When to use

• Use Radio buttons for mutually exclusive choices; not for multiple choices.
• Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
• Radio buttons are used only when two or more options are available. Single option toggles should use the checkbox component.

When not to use

• If a user can select from multiple options, use checkboxes instead of radio buttons. Radio buttons allow the user to select only one item in a set.

Anatomy

1. Group label (optional): Provides a general context to a set of radio buttons.
2. Radio input: Indicating the current state.
3. Radio button label: Provides information about a single option.
4. Radio button helper text (optional): Additional details specific for a single radio button option.
5. Group helper text (optional): General helper text for the entire radio group.
6. Group error text (on error): General error text for the Radio group.

Radio button groups

When using a radio button group, it can be laid out vertically or horizontally, depending on the use case. For easier reading, arrange the radio button groups vertically, when possible.

Stacked

Inline

Use horizontal aligned radio buttons sparingly, since long labels wrapping on smaller screens can be hard to predict.

States

Validation

Group validation

Content guidelines

Radio button labels should be clear, accurate and predictable. It should be easy and transparent for the user to understand what they are selecting:

• Use as few words as possible.
• Start with a capital letter.
• Avoid ending in punctuation if it’s a single sentence, word, or a fragment.
• Don’t truncate label text with an ellipsis.
• Don’t use commas or semicolons at the end of each line.

Multi-line

In situations where text will need to wrap beneath the radio button, the control and label are top aligned.

Accessibility

Due to accessibility issues with screen readers, links shouldn’t be used inside the form labels. Instead use a different element, like the form helper component.