# Radio group: Controlled

> Pass `value` and `onValueChange`. Outside changes animate the same way as clicks.

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

## Add this example

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

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

## Source

```tsx title="components/examples/radio-group/controlled.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const speeds = ["0.5×", "1×", "1.5×", "2×"]

export function RadioGroupControlled() {
  const [speed, setSpeed] = React.useState("1×")

  return (
    <div className="flex flex-col items-start gap-4 text-sm">
      <RadioGroup
        aria-label="Playback speed"
        value={speed}
        onValueChange={setSpeed}
        className="flex w-fit flex-wrap"
      >
        {speeds.map((value) => (
          <label key={value} className="flex items-center gap-2 tabular-nums">
            <RadioGroupItem value={value} />
            {value}
          </label>
        ))}
      </RadioGroup>
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          setSpeed(speeds[(speeds.indexOf(speed) + 1) % speeds.length])
        }
      >
        Next speed
      </Button>
    </div>
  )
}
```

## Props in this example

### RadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |
| `onValueChange` | `(value, details) => void` | – |  |

### RadioGroupItem

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

## More Radio group examples

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