#Basic

<RadioButtonGroup name="plan">
  <RadioButtonGroupItem value="free">
    Free
  </RadioButtonGroupItem>
  <RadioButtonGroupItem value="basic">
    Basic
  </RadioButtonGroupItem>
  <RadioButtonGroupItem value="premium">
    Premium
  </RadioButtonGroupItem>
</RadioButtonGroup>

#Controlled

<RadioButtonGroup
  name="plan"
  selectedValue={selectedValue}
  onChange={(newSelectedValue) => {
    setSelectedValue(newSelectedValue);
  }}
>
  <RadioButtonGroupItem value="free">
    Free
  </RadioButtonGroupItem>
  <RadioButtonGroupItem value="basic">
    Basic
  </RadioButtonGroupItem>
  <RadioButtonGroupItem value="premium">
    Premium
  </RadioButtonGroupItem>
</RadioButtonGroup>

#Props

name
Required
false
Type
string
Default
none
Notes
This will be passed to the <input type="radio" /> in RadioButtonGroupItem.
selectedValue
Required
false
Type
RadioButtonType["value"]
Default
none
onChange
Required
false
Type
(newSelectedVal: RadioButtonType["value"]) => void
Default
none
children*
Required
true
Type
ComponentChild
Default
none

RadioButtonGroupItem

value
Required
false
Type
RadioButtonType["value"]
Default
none
radioButtonRest
Required
false
Type
Omit<RadioButtonType, "size">
Default
none
Notes
This gets spread to the RadioButton like so:
<div>
  ...
  <RadioButton {...radioButtonRest} />
</div>
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"label">
Default
none