Radio
Radio buttons should be used to select from a group of boolean options when only one option can be selected at a time.
Thin wrapper around Radix-UI Radio group component (opens in a new tab)
<FormRadio> component must always be wrapped in <FormRadioGroup>
_10<FormRadioGroup>_10 <FormRadio>default</FormRadio>_10</FormRadioGroup>
States
The radio button supports the following modifiers. Note that the valid and invalid classnames are added to the input wrapper rather than the input itself.
_10<FormRadioGroup>_10 <FormRadio>default</FormRadio>_10 <FormRadio checked>checked</FormRadio>_10 <FormRadio disabled>disabled</FormRadio>_10 <FormRadio disabled checked>disabled checked</FormRadio>_10 <FormRadio valid={false}>invalid (pending review)</FormRadio>_10 <FormRadio valid={false} checked>invalid checked (pending review)</FormRadio>_10</FormRadioGroup>
Groups
Radio buttons only really make sense in groups. You should use <FormRadioGroup> to control all inputs.
When there is a form wrapping the group, inputs are automatically rendered and all events should work as intended natively.
You can use <FormRadioGroup> onValueChange prop to control the values.
_10<Form>_10 <FormRadioGroup name={'name'} onValueChange={handleChange}>_10 <FormRadio value={'email'}>Email</FormRadio>_10 <FormRadio value={'post'}>Post</FormRadio>_10 <FormRadio value={'both'}>Email & post</FormRadio>_10 </FormRadioGroup>_10</Form>
Radio Tiles
Tiled radio buttons offer a bigger touchable area. Note that in this case the label element has to be inserted explicitly as a child.
To lay the tiles out you can use a <FormRadioGroup> with the tile boolean prop modifier as well as <FormRadioTile> components inside.
_10<FormRadioGroup tile>_10 <FormRadioTile>_10 <IconPizza/>_10 default_10 </FormRadioTile>_10</FormRadioGroup>
Stacked Layout
Use the <FormRadioGroup> wrapper component with the tile AND stack boolean prop modifiers to make the most of the stacked layout.
_10<FormRadioGroup tile stack>_10 <FormRadioTile stack>_10 <IconPizza/>_10 default_10 </FormRadioTile>_10</FormRadioGroup>