import { Component } from '@angular/core';
import { WrRadio, WrRadioGroup } from 'ngwr/radio';
@Component({ imports: [WrRadio, WrRadioGroup] })
export class MyComponent {}Radio
Pick one option from a short list.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
Put radios in a <wr-radio-group> and bind its value with [(value)] or any Angular form.
<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>Descriptive labels
The label is projected content, so it can hold any markup.
<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. | WrRadioSize | '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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/radio's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-radio-bg | var(--wr-color-surface) | .wr-radio +1 variant override |
--wr-radio-border | var(--wr-border-base) | .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-family | var(--wr-font-family-base) | .wr-radio |
--wr-radio-font-size | var(--wr-text-sm) | .wr-radio +2 variant overrides |
--wr-radio-group-gap | var(--wr-space-sm) | .wr-radio-group |
--wr-radio-label-gap | var(--wr-space-sm) | .wr-radio |
--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 |
Dependencies
| Built on | Form, Icon |
|---|---|
| Used by | Schema Form |
See also
Component SegmentedPick one option from a row of buttons.Component CheckboxA checkbox for one boolean, or a group of them for an array.Component SelectPick one or several values from a list, with search and free-text tags.Component Form FieldWraps a form control with a label, a hint and its error messages.Guide FormsBind ngwr controls to any Angular form and show their errors.Component FormA plain layout wrapper for a label, a control and its error.Component IconRenders an SVG icon you register by name; ngwr ships none of its own.