# Radio group: Horizontal

> Cards can sit in a row or any grid. The ring follows them wherever they are.

Example: https://hextaui.com/docs/radio-group/examples/horizontal
Component docs: https://hextaui.com/docs/radio-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/radio-group-horizontal.json
```

This adds `components/examples/radio-group/horizontal.tsx` with the Radio group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/radio-group/horizontal.tsx"
import {
  RadioGroup,
  RadioGroupCard,
  RadioGroupCardTitle,
} from "@/components/ui/radio-group"

const sizes = ["S", "M", "L", "XL"]

export function RadioGroupHorizontal() {
  return (
    <RadioGroup
      variant="card"
      aria-label="Size"
      defaultValue="M"
      className="w-full max-w-sm grid-cols-2 sm:grid-cols-4"
    >
      {sizes.map((size) => (
        <RadioGroupCard key={size} value={size}>
          <RadioGroupCardTitle>{size}</RadioGroupCardTitle>
        </RadioGroupCard>
      ))}
    </RadioGroup>
  )
}
```

## Props in this example

### RadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "card"` | `"default"` | card adds the sliding selection ring. |
| `defaultValue` | `Value` | – |  |

### RadioGroupCard

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Radio group examples

- [Cards](https://hextaui.com/docs/radio-group/examples/cards.md)
- [Form](https://hextaui.com/docs/radio-group/examples/form.md)
- [Disabled and read-only](https://hextaui.com/docs/radio-group/examples/states.md)
- [Controlled](https://hextaui.com/docs/radio-group/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/radio-group/examples/rtl.md)