# Radio

> Single-choice option. Always used inside \<wr-radio-group>, which is the form control: it implements `FormValueControl`, so `[formField]` binds straight to its `value` model. `[(value)]` works standalone, and `[(ngModel)]` / reactive forms keep working through [Angular 22's forms bridge](https://ngwr.dev/guides/forms).

Source: https://ngwr.dev/reference/components/radio  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrRadio, WrRadioGroup } from 'ngwr/radio';
import { FormsModule } from '@angular/forms';

@Component({ imports: [WrRadio, WrRadioGroup, FormsModule] })
export class MyComponent {}
```

## Basic usage

```html
<wr-radio-group [(value)]="size">
  <wr-radio value="sm">Small</wr-radio>
  <wr-radio value="md">Medium</wr-radio>
  <wr-radio value="lg">Large</wr-radio>
</wr-radio-group>
```

## Plans (cards-style)

```html
<wr-radio-group [(value)]="plan">
  <wr-radio value="starter">Starter — $0/mo</wr-radio>
  <wr-radio value="pro">Pro — $9/mo</wr-radio>
  <wr-radio value="enterprise">Enterprise — custom</wr-radio>
</wr-radio-group>
```

## Disabled (whole group)

```html
<wr-radio-group [disabled]="true" [(value)]="size">
  <wr-radio value="sm">Small</wr-radio>
  <wr-radio value="md">Medium</wr-radio>
</wr-radio-group>
```

## Disabled (single option)

Disable one option while the rest stay selectable.

```html
<wr-radio-group [(value)]="size">
  <wr-radio value="sm">Small</wr-radio>
  <wr-radio value="md">Medium</wr-radio>
  <wr-radio value="lg" disabled>Large</wr-radio>
</wr-radio-group>
```

## Radio API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `id` | Stable id used to associate the native input with its label. Lands on the inner `<input>`; the host never keeps it. | `string` | `randomId('wr-radio')` |
| `value`required | Value selected when this radio is checked. | `unknown` | — |
| `icon` | Optional icon name rendered inside the dot when checked, in place of the default solid circle. Use any registered NGWR icon. | `WrIconName \| null` | `null` |
| `size` | Control size — shares the `--wr-control-*` contract. Set per option (the group has no `size`); unset falls back to the `radio.size` app default from `provideWrConfig()`. | `WrRadioSize \| null` | `'md'` |
| `disabled` | Disable just this option. The group can also be disabled as a whole via `<wr-radio-group disabled>`; either source disables this radio. | `boolean` | `false` |

## Radio Group API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `name` | Shared `name` attribute. Defaults to a random id so multiple groups on the same page don't collide. (Also the `FormUiControl.name` slot.) | `string` | `randomId('wr-radio-group')` |
| `disabled` | Disable the whole group. Bound automatically from the field's disabled state when used with `[formField]`. | `boolean` | `false` |
| `readonly` | Refuse selection changes while every option stays focusable and the value still submits. Bound automatically from the field's readonly state when used with `[formField]`. Native radios ignore the `readonly` attribute, so the group cancels the activation instead and mirrors the state as `aria-readonly`, which role `radiogroup` supports. | `boolean` | `false` |
| `value` | The selected radio's value. Bound by `[formField]`, or two-way via `[(value)]`. | `unknown` | `null` |
| `(touch)` | Emitted on blur from any child so a bound field can mark itself touched. | `void` | — |

## CSS variables

Custom properties `ngwr/radio` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-radio-bg` | `var(--wr-color-surface)` | `.wr-radio` +1 variant override |
| `--wr-radio-border` | `var(--wr-color-outline)` | `.wr-radio` +2 variant overrides |
| `--wr-radio-color` | `var(--wr-color-on-surface)` | `.wr-radio` +1 variant override |
| `--wr-radio-dot` | `transparent` | `.wr-radio` +1 variant override |
| `--wr-radio-font-size` | `var(--wr-text-sm)` | `.wr-radio` +2 variant overrides |
| `--wr-radio-line-height` | `var(--wr-control-line-height-md)` | `.wr-radio` +2 variant overrides |
| `--wr-radio-size` | `1.125rem` | `.wr-radio` +2 variant overrides |