RadioButtonGroup
Basic
<RadioButtonGroup name="plan">
<RadioButtonGroupItem value="free">
Free
</RadioButtonGroupItem>
<RadioButtonGroupItem value="basic">
Basic
</RadioButtonGroupItem>
<RadioButtonGroupItem value="premium">
Premium
</RadioButtonGroupItem>
</RadioButtonGroup>With different value initially selected
By default the first value will be selected. This is in accordance with UX best practices. If you want a different value to be selected you can use
initialSelectedValue.<RadioButtonGroup name="plan-2" initialSelectedValue="basic">
<RadioButtonGroupItem value="free">
Free
</RadioButtonGroupItem>
<RadioButtonGroupItem value="basic">
Basic
</RadioButtonGroupItem>
<RadioButtonGroupItem value="premium">
Premium
</RadioButtonGroupItem>
</RadioButtonGroup>With no value initially selected
By default the first value will be selected. This is in accordance with UX best practices. If you don't want a value to be initially selected you can set
initialSelectedValue to an empty string.<RadioButtonGroup name="plan-3" initialSelectedValue="">
<RadioButtonGroupItem value="free">
Free
</RadioButtonGroupItem>
<RadioButtonGroupItem value="basic">
Basic
</RadioButtonGroupItem>
<RadioButtonGroupItem value="premium">
Premium
</RadioButtonGroupItem>
</RadioButtonGroup>Controlled
<RadioButtonGroup
name="plan-4"
selectedValue={selectedValue}
onChange={(newSelectedValue) => {
setSelectedValue(newSelectedValue);
}}
>
<RadioButtonGroupItem value="free">
Free
</RadioButtonGroupItem>
<RadioButtonGroupItem value="basic">
Basic
</RadioButtonGroupItem>
<RadioButtonGroupItem value="premium">
Premium
</RadioButtonGroupItem>
</RadioButtonGroup>Props
| Prop | Required | Default | Type and notes |
|---|---|---|---|
name | - | - | This will be passed to the <input type="radio" /> in RadioButtonGroupItem. |
initialSelectedValue | - | - | |
selectedValue | - | - | |
onChange | - | - | |
children | - | |
RadioButtonGroupItem
| Prop | Required | Default | Type and notes |
|---|---|---|---|
value | - | - | |
radioButtonRest | - | - | This gets spread to the RadioButton like so: |
children | - | | |
...rest | - | - | |