# Radio

Radio wraps Base UI's radio primitive with the Tailwind classes from the official Base UI example.

::example{src="components/radio/radio.tsx"}

## Anatomy

### Base UI Style

```tsx
import { RadioGroup } from "@base-ui/react/radio-group"
import Radio from "@/components/ui/radio"

function ExampleRadioGroup() {
  const id = React.useId()

  return (
    <RadioGroup aria-labelledby={id} defaultValue="fuji-apple" className="flex flex-col items-start gap-1">
      <div id={id} className="text-sm font-bold">Best apple</div>
      <label className="flex items-center gap-2 text-sm">
        <Radio.Root value="fuji-apple">
          <Radio.Indicator />
        </Radio.Root>
        Fuji
      </label>
    </RadioGroup>
  )
}
```

### Shadcn Style

```tsx
import { Radio, RadioIndicator } from "@/components/ui/radio"

<Radio value="fuji-apple">
  <RadioIndicator />
</Radio>
```

## Composition

Use the following composition to build `Radio`:

```txt
Radio
└── RadioIndicator
```


## API Reference

Official API: [Base UI Radio API](https://base-ui.com/react/components/radio#api-reference).

This wrapper preserves the underlying Base UI Radio API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.

### Root

`Radio` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |

### Indicator

`Radio.Indicator` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |