Radio Group
A set of mutually exclusive options where only one can be selected at a time.
Default
Vertical by default. Control it with value and onValueChange, or let it manage itself with defaultValue. Name the group with aria-label or aria-labelledby so screen readers announce what the choice is for.
Disabled
Disable a single item, or the whole group with disabled on RadioGroup.
Read only
Keeps the selected appearance but ignores clicks and keyboard focus.
RadioGroup Properties
Controlled selected value.
Initial selected value when uncontrolled.
Called when the selected value changes.
Layout direction of the items.
Default: vertical
Disables every item.
Default: false
Additional classes for the group.
RadioGroupItem Properties
Value submitted when this item is selected.
Label rendered next to the radio control.
Disables this item.
Default: false
Prevents interaction while keeping the current appearance.
Default: false
Replaces the default dot shown in the selected state.
Removes all hover feedback.
Default: false
Removes the row padding. Hover then darkens the empty radio's border instead of filling a background.
Default: false
Additional classes for the row.
Additional classes for the radio control.
Additional classes for the element that wraps the label.