Skip to main content
Radio Group component preview (light)
  • Location: sabo/src/components/ui/radio-group.tsx

​
When to use

  • Let users select exactly one option from a short list (2-5 items work best).

​
Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export function Example() {
  return (
    <RadioGroup defaultValue="a" className="grid gap-2">
      <label className="flex items-center gap-2">
        <RadioGroupItem value="a" /> Option A
      </label>
      <label className="flex items-center gap-2">
        <RadioGroupItem value="b" /> Option B
      </label>
    </RadioGroup>
  );
}

​
Key props

​
RadioGroup.defaultValue | value
string
Initial or controlled value for the group.
​
RadioGroup.onValueChange
(value: string) => void
Change handler for controlled usage.
​
RadioGroupItem.value
string
Unique value that identifies the item in the group.
This component forwards all props from Radix Radio Group primitives (Root/Item). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/radio-group

​
Styling tip

Wrap each item with a label for proper hit area. 
<label className="flex items-center gap-2 cursor-pointer">
  <RadioGroupItem value="a" /> Option A
</label>

​
Accessibility

  • Each radio item must have an associated label for screen readers.
  • Use defaultValue or value to ensure one option is always selected.
  • Keyboard navigation (arrow keys) is handled automatically.