# Radio group

Radio group is a neobrutalist React component from Cruise UI. Native radios in a fieldset: pick exactly one of a few visible options.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/radio-group
```

Import: `import { CruiseRadioGroup } from "@/components/cruise/radio-group";`

## When to use

Exactly one of 2–5 options that people should see side by side.

## When not to

More than 5 options (use a Select). Several at once (use Checkboxes).

## Example (React)

```tsx
import { CruiseRadioGroup } from "@/components/cruise/radio-group";

export default function RadioGroupExample() {
  return (
    <CruiseRadioGroup
      legend="Delivery"
      defaultValue="pickup"
      options={[
        { value: "pickup", label: "Pick up in store" },
        { value: "lagos", label: "Delivery in Lagos" },
        { value: "other", label: "Delivery outside Lagos", disabled: true },
      ]}
    />
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<fieldset class="radio-group">
  <legend>Delivery</legend>
  <label class="check"><input type="radio" class="radio" name="delivery" value="pickup" checked> <span>Pick up in store</span></label>
  <label class="check"><input type="radio" class="radio" name="delivery" value="lagos"> <span>Delivery in Lagos</span></label>
  <label class="check"><input type="radio" class="radio" name="delivery" value="other"> <span>Delivery outside Lagos</span></label>
</fieldset>
```

## Props: CruiseRadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `legend` | `ReactNode` | — | — |
| `options` | `CruiseRadioOption<V>[]` | — | — |
| `value?` | `V` | — | — |
| `defaultValue?` | `V` | — | — |
| `onChange?` | `((value: V) => void)` | — | — |
| `name?` | `string` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- A <fieldset> with a <legend>; arrow keys move between options natively.
- Radios are the one round control (besides avatars).