RadioButtonGroup

import { RadioButtonGroup, RadioButtonGroupItem } from "rfui-package";

#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

PropRequiredDefaultType and notes
name--
string
This will be passed to the <input type="radio" /> in RadioButtonGroupItem.
initialSelectedValue--
RadioButtonType["value"]
selectedValue--
RadioButtonType["value"]
onChange--
(newSelectedVal: RadioButtonType["value"]) => void
children-
ComponentChild

RadioButtonGroupItem

PropRequiredDefaultType and notes
value--
RadioButtonType["value"]
radioButtonRest--
Omit<RadioButtonType, "size">
This gets spread to the RadioButton like so:
<div>
  ...
  <RadioButton {...radioButtonRest} />
</div>
children-
ComponentChild
...rest--
ComponentProps<"label">