INPUTS / COMPONENTS
Radio group
Choose one answer from a visible set.
About radio group
Radios should be used inside of Radio Groups. Radio Groups serve the purpose of selecting a single item from a list containing two or more options. If you require the ability to select multiple items or have only one choice available, opt for the Checkbox. In case you need to offer a straightforward binary choice with immediate impact, employ the Toggle.
Anatomy
Shared parts, named consistently.
- 1RadioRadio inputRequired
Selection control (input) that can be check or unchecked, and pushed into different states.
- 2RadioLabel
The label of the Radio.
- 3RadioChecked indicatorRequired
A small dot to indicate the Radio is checked.
- 1Radio GroupGroup label
The label of the group
- 2Radio GroupRadio stackRequired
Container that holds multiple Radios.
- 3Radio GroupValidation messageRequired
Message to add context to the error state.
Try the default
A working example with the shared V1 visual language.
When to use
Use for mutually exclusive choices when seeing every option helps a decision. Keep options in a labeled group.
Tab enters the group. Arrow keys move and select within it; Space selects the focused choice.