Radio
Radio buttons and radio group are used for single selection from a group of options.
Resources
- Radio on Figma
- Radio API (coming soon)
Types
Usage
Radio buttons are used for single selection. Radio buttons must always come in groups of two or more. Each radio button should always come with a label attached to it.
Radio buttons
Radio buttons must always come in groups of two or more. Each radio button should always come with a label attached to it.
If there is an error in the grouped selection, you may use an error message to let the user know the action they must take. Once the action is complete the error message can disappear.
Sub-items
If a selection calls for more options to be rendered, the interface and list style is slightly different allowing for the sections to be separated by a visible line.
If multiple selections will have their own sub-items, the interface and list style is slightly different allowing for the sections to be separated by a visible line.
Sub-details
In some cases, it may be required to show sub-details. We recommend showing details up front rather than upon selection.
Radio group
Use for single selection when there are few options with short labels.