Radio Group

Single-choice selection with accessible radio inputs.

• 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.