Form

Radio

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A set of checkable buttons where no more than one of the buttons can be checked at a time.

Usage#

app.component.ts

import { WDS_RADIO } from '@wds/angular/radio';

Examples#

Default#

value on wds-radio-group selects the option with the same value.

Default

Comfortable

Compact

Show code

radio-default.ts

import { Component } from '@angular/core';
import { WdsRadioComponent, WdsRadioGroupComponent } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-default-demo',
  imports: [WdsRadioGroupComponent, WdsRadioComponent],
  template: `
    <wds-radio-group value="comfortable" aria-label="Density">
      <wds-radio value="default">Default</wds-radio>
      <wds-radio value="comfortable">Comfortable</wds-radio>
      <wds-radio value="compact">Compact</wds-radio>
    </wds-radio-group>
  `,
})
export class RadioDefaultDemo {}

Description#

The description slot adds helper text below the label.

Default Standard spacing for most use cases.

Comfortable More space between elements.

Compact Minimal spacing for dense layouts.

Show code

radio-description.ts

import { Component } from '@angular/core';
import { WdsRadioComponent, WdsRadioGroupComponent } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-description-demo',
  imports: [WdsRadioGroupComponent, WdsRadioComponent],
  template: `
    <wds-radio-group value="default" aria-label="Density">
      <wds-radio value="default">
        Default
        <span slot="description">Standard spacing for most use cases.</span>
      </wds-radio>
      <wds-radio value="comfortable">
        Comfortable
        <span slot="description">More space between elements.</span>
      </wds-radio>
      <wds-radio value="compact">
        Compact
        <span slot="description">Minimal spacing for dense layouts.</span>
      </wds-radio>
    </wds-radio-group>
  `,
})
export class RadioDescriptionDemo {}

Choice card#

variant="card" turns each option into a card: a click anywhere on it selects the option.

Plus For individuals and small teams.

Pro For growing businesses.

Enterprise For large teams and enterprises.

Show code

radio-choice-card.ts

import { Component } from '@angular/core';
import { WdsRadioComponent, WdsRadioGroupComponent } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-choice-card-demo',
  imports: [WdsRadioGroupComponent, WdsRadioComponent],
  template: `
    <wds-radio-group class="w-full max-w-sm" value="plus" aria-label="Plan">
      <wds-radio variant="card" value="plus">
        Plus
        <span slot="description">For individuals and small teams.</span>
      </wds-radio>
      <wds-radio variant="card" value="pro">
        Pro
        <span slot="description">For growing businesses.</span>
      </wds-radio>
      <wds-radio variant="card" value="enterprise">
        Enterprise
        <span slot="description">For large teams and enterprises.</span>
      </wds-radio>
    </wds-radio-group>
  `,
})
export class RadioChoiceCardDemo {}

Fieldset#

wds-field-set with a legend and a description groups the options. wds-change reports the new value.

Subscription plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

plan: monthly

Show code

radio-fieldset.ts

import { Component, signal } from '@angular/core';
import { FormField, form } from '@angular/forms/signals';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsRadioGroupField } from '@wds/angular/forms';
import { WDS_RADIO } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-fieldset-demo',
  imports: [...WDS_FIELD, ...WDS_RADIO, FormField, WdsRadioGroupField],
  template: `
    <div class="flex w-xs max-w-full flex-col gap-3">
      <wds-field-set>
        <wds-field-legend variant="label">Subscription plan</wds-field-legend>
        <wds-field-description>Yearly and lifetime plans offer significant savings.</wds-field-description>
        <wds-radio-group [formField]="subscriptionForm.plan">
          <wds-radio value="monthly">Monthly ($9.99/month)</wds-radio>
          <wds-radio value="yearly">Yearly ($99.99/year)</wds-radio>
          <wds-radio value="lifetime">Lifetime ($299.99)</wds-radio>
        </wds-radio-group>
      </wds-field-set>
      <p class="m-0 font-mono text-sm text-muted-foreground">plan: {{ subscription().plan }}</p>
    </div>
  `,
})
export class RadioFieldsetDemo {
  protected readonly subscription = signal({ plan: 'monthly' });
  protected readonly subscriptionForm = form(this.subscription);
}

Disabled#

disabled on an option skips it; on the group it disables all options.

Disabled

Option 2

Option 3

Show code

radio-disabled.ts

import { Component } from '@angular/core';
import { WdsRadioComponent, WdsRadioGroupComponent } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-disabled-demo',
  imports: [WdsRadioGroupComponent, WdsRadioComponent],
  template: `
    <wds-radio-group value="option2" aria-label="Options">
      <wds-radio value="option1" disabled>Disabled</wds-radio>
      <wds-radio value="option2">Option 2</wds-radio>
      <wds-radio value="option3">Option 3</wds-radio>
    </wds-radio-group>
  `,
})
export class RadioDisabledDemo {}

Invalid#

invalid on the group shows the error state on every option.

Notification preferences

Choose how you want to receive notifications.

Email only

SMS only

Both email and SMS

Show code

radio-invalid.ts

import { Component } from '@angular/core';
import { WdsFieldDescriptionComponent, WdsFieldLegendComponent, WdsFieldSetComponent } from '@wds/angular/field';
import { WdsRadioComponent, WdsRadioGroupComponent } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-invalid-demo',
  imports: [WdsFieldSetComponent, WdsFieldLegendComponent, WdsFieldDescriptionComponent, WdsRadioGroupComponent, WdsRadioComponent],
  template: `
    <wds-field-set class="w-full max-w-xs">
      <wds-field-legend variant="label">Notification preferences</wds-field-legend>
      <wds-field-description>Choose how you want to receive notifications.</wds-field-description>
      <wds-radio-group invalid>
        <wds-radio value="email">Email only</wds-radio>
        <wds-radio value="sms">SMS only</wds-radio>
        <wds-radio value="both">Both email and SMS</wds-radio>
      </wds-radio-group>
    </wds-field-set>
  `,
})
export class RadioInvalidDemo {}

Forms#

Integration with Angular forms. Pick the API your app uses.

Signal forms#

WdsRadioGroupField connects the group to [formField]. In wds-field the label names the group and wds-field-error describes it.

Show code

radio-signal-forms.ts

import { Component, computed, signal } from '@angular/core';
import { FormField, FormRoot, form, required } from '@angular/forms/signals';
import { WdsButtonComponent } from '@wds/angular/button';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsRadioGroupField } from '@wds/angular/forms';
import { WDS_RADIO } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-signal-forms-demo',
  imports: [...WDS_FIELD, ...WDS_RADIO, FormField, FormRoot, WdsButtonComponent, WdsRadioGroupField],
  template: `
    <form class="flex w-sm max-w-full flex-col gap-4" [formRoot]="notificationsForm">
      <wds-field [invalid]="showErrors()">
        <wds-field-label>Notify me about...</wds-field-label>
        <wds-radio-group [formField]="notificationsForm.type">
          <wds-radio value="all">All new messages</wds-radio>
          <wds-radio value="mentions">Direct messages and mentions</wds-radio>
          <wds-radio value="none">Nothing</wds-radio>
        </wds-radio-group>
        <wds-field-error [errors]="showErrors() ? notificationsForm.type().errors() : []" />
      </wds-field>
      <wds-button type="submit" class="self-start">Submit</wds-button>
      <p class="m-0 font-mono text-sm text-muted-foreground">Submitted: {{ submitted() }}</p>
    </form>
  `,
})
export class RadioSignalFormsDemo {
  protected readonly notifications = signal({ type: '' });
  protected readonly submitted = signal('—');

  protected readonly notificationsForm = form(
    this.notifications,
    (path) => {
      required(path.type, { message: 'Select a notification type.' });
    },
    {
      submission: {
        action: async (form) => {
          this.submitted.set(JSON.stringify(form().value()));
        },
      },
    }
  );

  /** Errors appear after the user leaves the group or submits the form. */
  protected readonly showErrors = computed(() => this.notificationsForm.type().touched() && this.notificationsForm.type().invalid());
}

Template-driven#

WdsRadioGroupValueAccessor makes ngModel work on wds-radio-group; required needs a selected option.

Show code

radio-template-driven.ts

import { Component, signal } from '@angular/core';
import { FormsModule, type NgForm } from '@angular/forms';
import { WdsButtonComponent } from '@wds/angular/button';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsRadioGroupValueAccessor } from '@wds/angular/forms';
import { WDS_RADIO } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-template-driven-demo',
  imports: [...WDS_FIELD, ...WDS_RADIO, FormsModule, WdsButtonComponent, WdsRadioGroupValueAccessor],
  template: `
    <form #notificationsForm="ngForm" class="flex w-sm max-w-full flex-col gap-4" (ngSubmit)="save(notificationsForm)">
      <wds-field [invalid]="!!type.invalid && !!type.touched">
        <wds-field-label>Notify me about...</wds-field-label>
        <wds-radio-group #type="ngModel" name="type" [(ngModel)]="notifications.type" required>
          <wds-radio value="all">All new messages</wds-radio>
          <wds-radio value="mentions">Direct messages and mentions</wds-radio>
          <wds-radio value="none">Nothing</wds-radio>
        </wds-radio-group>
        @if (type.invalid && type.touched) {
          <wds-field-error>Select a notification type.</wds-field-error>
        }
      </wds-field>
      <wds-button type="submit" class="self-start">Submit</wds-button>
      <p class="m-0 font-mono text-sm text-muted-foreground">Submitted: {{ submitted() }}</p>
    </form>
  `,
})
export class RadioTemplateDrivenDemo {
  protected readonly notifications = { type: '' };
  protected readonly submitted = signal('—');

  protected save(form: NgForm): void {
    if (form.invalid) {
      form.form.markAllAsTouched();
      return;
    }
    this.submitted.set(JSON.stringify(form.value));
  }
}

Reactive forms#

The same WdsRadioGroupValueAccessor works with formControl and formControlName.

Show code

radio-reactive-forms.ts

import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { WdsButtonComponent } from '@wds/angular/button';
import { WDS_FIELD } from '@wds/angular/field';
import { WdsRadioGroupValueAccessor } from '@wds/angular/forms';
import { WDS_RADIO } from '@wds/angular/radio';

@Component({
  selector: 'app-radio-reactive-forms-demo',
  imports: [...WDS_FIELD, ...WDS_RADIO, ReactiveFormsModule, WdsButtonComponent, WdsRadioGroupValueAccessor],
  template: `
    <form class="flex w-sm max-w-full flex-col gap-4" [formGroup]="notificationsForm" (ngSubmit)="save()">
      <wds-field [invalid]="type.invalid && type.touched">
        <wds-field-label>Notify me about...</wds-field-label>
        <wds-radio-group formControlName="type">
          <wds-radio value="all">All new messages</wds-radio>
          <wds-radio value="mentions">Direct messages and mentions</wds-radio>
          <wds-radio value="none">Nothing</wds-radio>
        </wds-radio-group>
        @if (type.invalid && type.touched) {
          <wds-field-error>Select a notification type.</wds-field-error>
        }
      </wds-field>
      <wds-button type="submit" class="self-start">Submit</wds-button>
      <p class="m-0 font-mono text-sm text-muted-foreground">Submitted: {{ submitted() }}</p>
    </form>
  `,
})
export class RadioReactiveFormsDemo {
  protected readonly notificationsForm = new FormGroup({
    type: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
  });
  protected readonly type = this.notificationsForm.controls.type;
  protected readonly submitted = signal('—');

  protected save(): void {
    if (this.notificationsForm.invalid) {
      this.notificationsForm.markAllAsTouched();
      return;
    }
    this.submitted.set(JSON.stringify(this.notificationsForm.getRawValue()));
  }
}

API References#

wds-radio-group#

A radio group: manages the selection, arrow-key navigation and the form value.

Attributes

Attribute	Type	Default	Description
name	string	''	Field name in the form. Reflected to the attribute, which FormData uses (also when a framework sets it as a property).
value	string	''	Value of the selected `wds-radio`.
disabled	boolean	false	Disables the whole group and excludes it from form submission.
required	boolean	false	One of the options must be selected for the form to be valid.
invalid	boolean	false	Error state of the whole group: sets `invalid` on every `wds-radio`.

Events

Event	Description
wds-changeCustomEvent<WdsChangeDetail>	The user selected another option.

Methods

Method	Description
formResetCallback()	Jak natywne pola: reset wraca do wartości z atrybutu `value` (np. wyrenderowanej przez serwer).
formDisabledCallback(disabled: boolean)
checkValidity()	Returns `true` when the value is valid; otherwise fires `invalid` on the element.
reportValidity()	Like `checkValidity()`, and shows the browser validation bubble when the value is invalid.
setCustomValidity(message: string)	Sets a custom validation error (an empty string clears it), like `input.setCustomValidity()`.

Slots

Slot	Description
(default)	`<wds-radio>` elements.

wds-radio#

A single radio button. Use it inside <wds-radio-group>.

Attributes

Attribute	Type	Default	Description
value	string	''	Value passed to the group and the form.
checked	boolean	false	Set by the group.
disabled	boolean	false	Disables this option.
invalid	boolean	false	Error state: red border and `aria-invalid`. A group with `invalid` sets it on every option.
variant	WdsRadioVariant	'default'	`card` is a clickable card with a border and the control on the right.

Slots

Slot	Description
(default)	Label content.
description	Helper text below the label (read as a description, not as the name).

CSS parts (::part)

Part	Description
root	The container (the card in the `card` variant).
control	The round indicator.
label	The label container.
description	The helper text.

CSS custom properties

Property	Description
--wds-radio-border	Border color.
--wds-radio-checked	Checked color.

Accessibility#

wds-radio-group has role="radiogroup" and each wds-radio role="radio" with aria-checked. Give the group a name: aria-label, wds-field-label in wds-field, or a legend of wds-field-set around it.

The content of wds-radio is its name; the description slot is read as a description, not as part of the name.

invalid sets aria-invalid="true" on the group and the options, required sets aria-required="true" on the group, and a disabled option gets aria-disabled="true".

The group takes part in forms: the value of the selected option is submitted under name, and a form reset restores the value attribute.

Keyboard support#

Key	Function
Tab	Moves focus into the group, to the selected option or, without one, to the first enabled option. Tab again leaves the group.
ArrowDownArrowRight	Moves to the next enabled option and selects it; from the last option wraps to the first.
ArrowUpArrowLeft	Moves to the previous enabled option and selects it; from the first option wraps to the last.
Space	Selects the focused option.

Usage#

Examples#

Default#

Description#

Choice card#

Fieldset#

Disabled#

Invalid#

Forms#

Signal forms#

Template-driven#

Reactive forms#

API References#

wds-radio-group#

Attributes

Events

Methods

Slots

wds-radio#

Attributes

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#