Radio Group

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.

DialogModal dialog for confirmations and forms.

​When to use

​Usage

​Key props

​Styling tip

​Accessibility

When to use

Usage

Key props

Styling tip

Accessibility