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 | - | - |
|