Radios allow users to select only one option from a group of two or more options.
The radio component is made up of four elements.
- Radio input
- Helper text
- Status mark
Labels are not required if an adjacent label is included that adequately describes the purpose of the radio and is correctly referenced to the field for accessibility purposes
Helper text can be included alongside the label to provide additional context or guidance for using the control. The helper text wraps to the next line once it reaches the width of the container.
When labels wrap to multiple lines, the first line of the text should remain vertically centered with the control. Secondary text should simply wrap to the next line.
Radios can be either unselected or selected. Each of those statuses has five states:
The following component tokens are available for customizing the radio component.
Sample references including the swatch and computed values currently represent the applied light theme.
The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.