Example
Patterns
RadioGroup accepts multiple Radio elements as children. Each Radio represents an option that can be selected, labeled by its children.
Note: A Radio cannot be used outside of a RadioGroup.
Label
Each RadioGroup should be labelled using the label prop. If a visible label isn’t appropriate, use the aria-label prop to identify the control for accessibility.
Custom labels should be wrapped with the Text component.
Value
RadioGroup only allows single selection. An initial, uncontrolled value can be provided to the RadioGroup using the defaultValue prop. Alternatively, a controlled value can be provided using the value and onChange props.
Props
Orientation
Radio groups are vertically oriented by default. The orientation prop can be used to change the orientation to “horizontal”.
Disabled
A radio group that isDisabled shows that a field exists, but is not currently available.
You can also provide the isDisabled prop to individual radio buttons.
Required
A RadioGroup can be marked as required by setting the isRequired prop.
Description
The description communicates a hint or helpful information, such as specific requirements for what to choose.
Error message
The errorMessage communicates an error when the selection requirements aren’t met, prompting the user to adjust what they had originally selected.