Form

Toggle

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A two-state button that can be either on or off.

Usage#

app.component.ts

import { WdsToggleComponent } from '@wds/angular/toggle';

A toggle switches a setting of the content, like Bold in a toolbar. For a setting that takes effect like a form field use Switch or Checkbox; for a set of toggles use Toggle Group.

Examples#

Default#

A click switches pressed and fires wds-change. An icon-only toggle needs a label.

Show code

toggle-default.ts

import { Component } from '@angular/core';
import { WdsToggleComponent } from '@wds/angular/toggle';

@Component({
  selector: 'app-toggle-default-demo',
  imports: [WdsToggleComponent],
  template: `
    <wds-toggle label="Bookmark">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
    </wds-toggle>
  `,
})
export class ToggleDefaultDemo {}

Outline#

variant="outline" adds a border.

Show code

toggle-outline.ts

import { Component } from '@angular/core';
import { WdsToggleComponent } from '@wds/angular/toggle';

@Component({
  selector: 'app-toggle-outline-demo',
  imports: [WdsToggleComponent],
  template: `
    <wds-toggle variant="outline" label="Italic">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" x2="10" y1="4" y2="4" /><line x1="14" x2="5" y1="20" y2="20" /><line x1="15" x2="9" y1="4" y2="20" /></svg>
    </wds-toggle>
  `,
})
export class ToggleOutlineDemo {}

With text#

An icon and text side by side.

Italic

Show code

toggle-text.ts

import { Component } from '@angular/core';
import { WdsToggleComponent } from '@wds/angular/toggle';

@Component({
  selector: 'app-toggle-text-demo',
  imports: [WdsToggleComponent],
  template: `
    <wds-toggle>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" x2="10" y1="4" y2="4" /><line x1="14" x2="5" y1="20" y2="20" /><line x1="15" x2="9" y1="4" y2="20" /></svg>
      Italic
    </wds-toggle>
  `,
})
export class ToggleTextDemo {}

Size#

size is sm, default or lg.

Small

Default

Large

Show code

toggle-size.ts

import { Component } from '@angular/core';
import { WdsToggleComponent } from '@wds/angular/toggle';

@Component({
  selector: 'app-toggle-size-demo',
  imports: [WdsToggleComponent],
  template: `
    <div class="flex flex-wrap items-center gap-2">
      <wds-toggle size="sm" variant="outline">Small</wds-toggle>
      <wds-toggle variant="outline">Default</wds-toggle>
      <wds-toggle size="lg" variant="outline">Large</wds-toggle>
    </div>
  `,
})
export class ToggleSizeDemo {}

Pressed#

pressed sets the initial state.

Saved

Show code

toggle-pressed.ts

import { Component } from '@angular/core';
import { WdsToggleComponent } from '@wds/angular/toggle';

@Component({
  selector: 'app-toggle-pressed-demo',
  imports: [WdsToggleComponent],
  template: `
    <wds-toggle variant="outline" pressed>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
      Saved
    </wds-toggle>
  `,
})
export class TogglePressedDemo {}

Disabled#

disabled turns the toggle off.

Show code

toggle-disabled.ts

import { Component } from '@angular/core';
import { WdsToggleComponent } from '@wds/angular/toggle';

@Component({
  selector: 'app-toggle-disabled-demo',
  imports: [WdsToggleComponent],
  template: `
    <wds-toggle disabled label="Underline">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4v6a6 6 0 0 0 12 0V4" /><line x1="4" x2="20" y1="20" y2="20" /></svg>
    </wds-toggle>
  `,
})
export class ToggleDisabledDemo {}

API References#

wds-toggle#

A two-state button that can be either on or off (aria-pressed), such as Bold in a text toolbar. In a wds-toggle-group the group decides which toggles are pressed and fires wds-change itself.

Attributes

Attribute	Type	Default	Description
pressed	boolean	false	Whether the toggle is on.
disabled	boolean	false	Disables the toggle.
variant	WdsToggleVariant	'default'	`outline` adds a border. In a group the group's `variant` wins.
size	WdsToggleSize	'default'	Height: `sm`, `default` or `lg`. In a group the group's `size` wins.
label	string \| undefined		Accessible name (`aria-label`); required when the toggle shows only an icon.
value	string	''	Value of the toggle in a `wds-toggle-group`.

Events

Event	Description
wds-changeCustomEvent<WdsTogglePressedChangeDetail>	The user pressed or released the toggle.

Slots

Slot	Description
(default)	Content: text and/or an `<svg>` icon.

CSS parts (::part)

Part	Description
button	The native `<button>`.

Accessibility#

The toggle is a native button with aria-pressed, so screen readers announce it as a toggle button, pressed or not pressed.

Keep the label the same in both states (e.g. "Bold"); the state is announced separately. Name an icon-only toggle with label.

Keyboard support#

Key	Function
Tab	Moves focus to the toggle.
Space	Presses or releases the toggle.
Enter	Presses or releases the toggle.

Usage#

Examples#

Default#

Outline#

With text#

Size#

Pressed#

Disabled#

API References#

wds-toggle#

Attributes

Events

Slots

CSS parts (::part)

Accessibility#

Screen reader#

Keyboard support#