Radio buttons allow users to select a single option from a list of mutually exclusive options.
All possible options are exposed up front for users to compare.
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 prop.
functionExample(){let[selected, setSelected]=React.useState('yes');return(<Flexgap="size-300"><RadioGrouplabel="Are you a wizard? (uncontrolled)"defaultValue="yes"><Radiovalue="yes">Yes</Radio><Radiovalue="no">No</Radio></RadioGroup><RadioGrouplabel="Are you a wizard? (controlled)"value={selected}onChange={setSelected}><Radiovalue="yes">Yes</Radio><Radiovalue="no">No</Radio></RadioGroup></Flex>);}
functionExample(){let[selected, setSelected]=React.useState('yes');return(<Flexgap="size-300"><RadioGrouplabel="Are you a wizard? (uncontrolled)"defaultValue="yes"><Radiovalue="yes">Yes</Radio><Radiovalue="no">No</Radio></RadioGroup><RadioGrouplabel="Are you a wizard? (controlled)"value={selected}onChange={setSelected}><Radiovalue="yes">Yes</Radio><Radiovalue="no">No</Radio></RadioGroup></Flex>);}
functionExample(){let[
selected,
setSelected
]=React.useState('yes');return(<Flexgap="size-300"><RadioGrouplabel="Are you a wizard? (uncontrolled)"defaultValue="yes"><Radiovalue="yes">
Yes
</Radio><Radiovalue="no">
No
</Radio></RadioGroup><RadioGrouplabel="Are you a wizard? (controlled)"value={selected}onChange={
setSelected
}><Radiovalue="yes">
Yes
</Radio><Radiovalue="no">
No
</Radio></RadioGroup></Flex>);}
A visual label should be provided for the RadioGroup using the label prop. If the RadioGroup is required, the isRequired and
necessityIndicator props can be used to show a required state.
If a visible label isn't specified for a RadioGroup, an aria-label must be provided for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.
Radio elements should always have a visible label.
To internationalize a RadioGroup, a localized string should be set as the child content of the Radio.
For languages that are read right-to-left (e.g. Hebrew and Arabic), the Radio is automatically placed on the right side of the text. When the necessityIndicator prop is set to "label", a localized string will be provided for "(required)" or "(optional)" automatically.
RadioGroup accepts an onChange prop, which is triggered when a user changes the selected value.
The example below uses onChange to log how the user is interacting with the component.
functionExample(){let[selected, setSelected]=React.useState('');return(<><RadioGrouplabel="Favorite avatar"onChange={setSelected}><Radiovalue="wizard">Wizard</Radio><Radiovalue="dragon">Dragon</Radio></RadioGroup><div>You have selected: {selected}</div></>);}
functionExample(){let[selected, setSelected]=React.useState('');return(<><RadioGrouplabel="Favorite avatar"onChange={setSelected}><Radiovalue="wizard">Wizard</Radio><Radiovalue="dragon">Dragon</Radio></RadioGroup><div>You have selected: {selected}</div></>);}
functionExample(){let[
selected,
setSelected
]=React.useState('');return(<><RadioGrouplabel="Favorite avatar"onChange={
setSelected
}><Radiovalue="wizard">
Wizard
</Radio><Radiovalue="dragon">
Dragon
</Radio></RadioGroup><div>
You have
selected:{' '}{selected}</div></>);}
RadioGroups can display a validation state to communicate to the user if the current value is invalid.
Implement your own validation logic in your app and pass "invalid" to the RadioGroup via the validationState prop.
Whether user input is required on the input before form submission.
Often paired with the necessityIndicator prop to add a visual indicator to the input.
By default, the label is positioned above the RadioGroup.
The labelPosition prop can be used to position the label to the side. The labelAlign prop can
be used to align the label as "start" or "end".
For left-to-right (LTR) languages, "start" refers to the left most edge of the RadioGroup
and "end" refers to the right most edge. For right-to-left (RTL) languages, this is flipped.