vert-ui
Browse docs
All components

Radio Group

Single-choice control for mutually exclusive options that are all visible at once. Arrow keys move and select; Tab lands on the group.

Preview

Live preview

Usage

Examples

Controlled selection

const [plan, setPlan] = useState("team")

<RadioGroup value={plan} onValueChange={setPlan} aria-label="Plan">
  <label className="flex gap-3">
    <RadioGroupItem value="free" /> Free
  </label>
  <label className="flex gap-3">
    <RadioGroupItem value="team" /> Team
  </label>
</RadioGroup>

Horizontal with sizes

<RadioGroup orientation="horizontal" defaultValue="s" aria-label="Size">
  <RadioGroupItem value="s" size="sm" />
  <RadioGroupItem value="m" size="md" />
  <RadioGroupItem value="l" size="lg" />
</RadioGroup>

Reference

Props

PropTypeDefaultDescription
value / defaultValuestring—Controlled or uncontrolled selection.
onValueChange(value: string) => void—Fires when the user picks an item (click or arrow key).
orientation"vertical" | "horizontal""vertical"Stacking direction of the items; also sets data-orientation.
namestring—Groups the items into a native form field for submission.
RadioGroupItem value(required)string—Value reported by onValueChange; must be unique within the group.
RadioGroupItem size"sm" | "md" | "lg""md"Diameter of the radio control.

Accessibility

Accessibility notes

  • Renders role="radiogroup" with role="radio" children and aria-checked state — announced as a group of options.
  • Wrap each item in a real <label> (as in the preview) or give RadioGroupItem an aria-label.
  • Arrow keys move focus and select the new option, matching native radio behaviour; Tab moves past the whole group.
  • Use radios for a small number of always-visible choices; use Select for long lists.
  • Keep every option visible — hiding options behind a disclosure defeats the point of a radio group.