Radio group
Radio groups display a related set of options where only one option can be selected.
Anatomy
The radio group component is made up of six elements.
- Label
- Required indicator
- Helper text
- Control
- Default slot
- Error text
Variants
Label
Radio groups can include a label that describes the related controls.
Helper text
Helper text can be included to convey additional information about the controls.
Default slot
The default slot accommodates any number of radios that are contextually related.
Required indicator
Radio groups can be marked as either required or optional which triggers relevant validation on the form. The indicator is a preset and styled element within the component, not manually entered as part of the label string.
Required form elements are used when the majority of the form elements are optional, but a few need to be marked as required.
Optional form elements are used when the majority of the form elements are required, but a few elements need to be marked as optional.
Orientation
Radio groups can be either vertical or horizontal depending on the layout requirements of the user interface. The default orientation is vertical.
Behavior
Invalid
An invalid state can be triggered on radio groups to indicate that a value needs to be entered or that the entered value is invalid. Error text is always displayed as part of the invalid state to allow for a generic error message or provide specific guidance as to what needs to be fixed. Error text is always displayed in addition to any helper text that is present and below the default slot.
Text overflow
Label
Label text that is longer than the available space wraps to a new line.
Helper and error text
Helper and error text wrap to a new line when they are too long for available horizontal space.
Component tokens
The following component tokens are available for customizing the radio group 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.