> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio Group

> Single-choice selection with accessible radio inputs.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/LH5aXxXQjZcsU-Hh/images/ui/radio-group-light.png?fit=max&auto=format&n=LH5aXxXQjZcsU-Hh&q=85&s=1778b0609206192384a2a24adc29f3c1" alt="Radio Group component preview (light)" width="200" data-path="images/ui/radio-group-light.png" />
</Frame>

* **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

```tsx theme={null}
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

<ParamField path="RadioGroup.defaultValue | value" type="string">
  Initial or controlled value for the group.
</ParamField>

<ParamField path="RadioGroup.onValueChange" type="(value: string) => void">
  Change handler for controlled usage.
</ParamField>

<ParamField path="RadioGroupItem.value" type="string">
  Unique value that identifies the item in the group.
</ParamField>

<Note>
  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](https://www.radix-ui.com/primitives/docs/components/radio-group)
</Note>

## Styling tip

Wrap each item with a label for proper hit area.

```tsx theme={null}
<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.