# Radio

```ts
import { Radio } from 'cx/widgets';
```

Radio buttons are used for making a single selection within a limited number of options. All radios in a group share the same `value` binding, and each has a unique `option`. When clicked, the radio's `option` value is written to `value`.

```tsx
import { createModel } from "cx/data";
import { bind } from "cx/ui";
import { Radio } from "cx/widgets";

interface Model {
  size: string;
}

const m = createModel<Model>();

export default (
  <div style="display: flex; flex-direction: column; gap: 8px">
    <Radio value={m.size} option="small" text="Small" default />
    <Radio value={m.size} option="medium" text="Medium" />
    <Radio value={m.size} option="large" text="Large" />
    <Radio value={m.size} option="disabled" text="Disabled Option" disabled />
  </div>
);

```

## Configuration

### Core Properties

| Property   | Type      | Default | Description                                                   |
| ---------- | --------- | ------- | ------------------------------------------------------------- |
| `value`    | `any`     |         | Selected value shared by all radios in a group                |
| `selection`| `any`     |         | Alias for `value`                                             |
| `option`   | `any`     |         | Value written to `value` when this radio is selected          |
| `text`     | `string`  |         | Text displayed next to the radio button                       |
| `label`    | `string`  |         | Label displayed before the radio button                       |
| `disabled` | `boolean` | `false` | Disables the radio button                                     |
| `readOnly` | `boolean` | `false` | Makes the radio button read-only                              |
| `required` | `boolean` | `false` | Marks the field as required                                   |
| `default`  | `boolean` | `false` | Auto-select this radio if `value` is undefined                |
| `viewMode` | `boolean` | `false` | Display as plain text instead of interactive radio            |
| `autoFocus`| `boolean` | `false` | Automatically focus the field on mount                        |

### Appearance

| Property     | Type      | Default | Description                                          |
| ------------ | --------- | ------- | ---------------------------------------------------- |
| `native`     | `boolean` | `false` | Use native HTML radio instead of styled version      |
| `inputStyle` | `object`  |         | CSS styles for the radio element                     |
| `emptyText`  | `string`  |         | Text shown in view mode when no option is selected   |
| `tooltip`    | `string`  |         | Tooltip text or configuration                        |

### Callbacks

| Property     | Type       | Description                                             |
| ------------ | ---------- | ------------------------------------------------------- |
| `onValidate` | `function` | Custom validation function returning error or undefined |