Installation
import { WrRadio, WrRadioGroup } from 'ngwr/radio';
import { FormsModule } from '@angular/forms';
@Component({ imports: [WrRadio, WrRadioGroup, FormsModule] })
export class MyComponent {}Basic usage
<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)
<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)
<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.
<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') |
valuerequired | 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 |