---
title: Radio
description: A selection control for choosing one option from a set.
---
import Source from './_generated/radio.mdx';

A group of radios for choosing a single option from a set. Android shows an MD3 ring with an animated dot; iOS uses a plain checkmark (no circle). Arrow keys move the selection within the group per the WAI-ARIA radio pattern.

<DemoFrame component="radio" />

## Installation

```bash
npx touchcn add radio
```

## Usage

<CodeGroup>

```html Angular
<tcn-radio-group [(value)]="plan">
  <tcn-radio value="free">Free</tcn-radio>
  <tcn-radio value="pro">Pro</tcn-radio>
</tcn-radio-group>
```

```tsx React
import { TcnRadio, TcnRadioGroup } from '@/components/ui/radio';

<TcnRadioGroup value={plan} onValueChange={setPlan}>
  <TcnRadio value="free">Free</TcnRadio>
  <TcnRadio value="pro">Pro</TcnRadio>
</TcnRadioGroup>
```

```vue Vue
<script setup lang="ts">
import { TcnRadio, TcnRadioGroup } from '@/components/ui/radio';
</script>

<template>
  <TcnRadioGroup v-model="plan">
    <TcnRadio value="free">Free</TcnRadio>
    <TcnRadio value="pro">Pro</TcnRadio>
  </TcnRadioGroup>
</template>
```

</CodeGroup>

## Props

### RadioGroup

| Prop            | Type                        | Default | Description                        |
| --------------- | --------------------------- | ------- | ---------------------------------- |
| `value`         | `string \| null`            | `null`  | Selected value (two-way bound).    |
| `onValueChange` | `(value: string) => void`   | —       | Change callback (React).           |
| `disabled`      | `boolean`                   | `false` | Disable the whole group.           |

### Radio

| Prop       | Type      | Default | Description                    |
| ---------- | --------- | ------- | ------------------------------ |
| `value`    | `string`  | —       | The option's value (required). |
| `disabled` | `boolean` | `false` | Disable this option.           |

On React, `TcnRadioGroup` / `TcnRadio` forward Radix `RadioGroup` props.

<Source />