Form

Toggle Group

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A set of two-state buttons that can be toggled on or off.

Usage#

app.component.ts

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

Put Toggle elements with a value in the group. The group sets their variant, size and pressed; read the choice from value (type="single") or values (type="multiple") and the wds-change event. Name the group with aria-label.

Examples#

Default#

type="multiple": any number of toggles can be pressed. values lists them, e.g. values="bold,italic".

Show code

toggle-group-default.ts

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

@Component({
  selector: 'app-toggle-group-default-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="multiple" aria-label="Text formatting">
      <wds-toggle value="bold" label="Bold">
        <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 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg>
      </wds-toggle>
      <wds-toggle value="italic" 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>
      <wds-toggle value="underline" 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>
    </wds-toggle-group>
  `,
})
export class ToggleGroupDefaultDemo {}

Outline#

variant="outline" joins the toggles into one bordered control.

Show code

toggle-group-outline.ts

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

@Component({
  selector: 'app-toggle-group-outline-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="multiple" variant="outline" values="bold" aria-label="Text formatting">
      <wds-toggle value="bold" label="Bold">
        <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 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg>
      </wds-toggle>
      <wds-toggle value="italic" 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>
      <wds-toggle value="underline" 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>
    </wds-toggle-group>
  `,
})
export class ToggleGroupOutlineDemo {}

Single#

type="single": pressing a toggle releases the others; value holds the pressed one. A click on the pressed toggle releases it.

Show code

toggle-group-single.ts

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

@Component({
  selector: 'app-toggle-group-single-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="single" variant="outline" value="left" aria-label="Text alignment">
      <wds-toggle value="left" label="Align left">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg>
      </wds-toggle>
      <wds-toggle value="center" label="Align center">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg>
      </wds-toggle>
      <wds-toggle value="right" label="Align right">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg>
      </wds-toggle>
    </wds-toggle-group>
  `,
})
export class ToggleGroupSingleDemo {}

Segmented#

required keeps one toggle pressed (a click on the pressed one does nothing), which makes a segmented control, e.g. for a time range.

Day

Week

Month

Year

Show code

toggle-group-segmented.ts

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

@Component({
  selector: 'app-toggle-group-segmented-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="single" variant="outline" value="week" required aria-label="Range">
      <wds-toggle value="day">Day</wds-toggle>
      <wds-toggle value="week">Week</wds-toggle>
      <wds-toggle value="month">Month</wds-toggle>
      <wds-toggle value="year">Year</wds-toggle>
    </wds-toggle-group>
  `,
})
export class ToggleGroupSegmentedDemo {}

Size#

size (sm, default, lg) applies to every toggle in the group.

Show code

toggle-group-size.ts

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

@Component({
  selector: 'app-toggle-group-size-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <div class="flex flex-col items-center gap-4">
      <wds-toggle-group type="multiple" variant="outline" size="sm" aria-label="Small">
        <wds-toggle value="bold" label="Bold"><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 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg></wds-toggle>
        <wds-toggle value="italic" 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>
        <wds-toggle value="underline" 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>
      </wds-toggle-group>
      <wds-toggle-group type="multiple" variant="outline" size="lg" aria-label="Large">
        <wds-toggle value="bold" label="Bold"><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 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg></wds-toggle>
        <wds-toggle value="italic" 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>
        <wds-toggle value="underline" 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>
      </wds-toggle-group>
    </div>
  `,
})
export class ToggleGroupSizeDemo {}

Spacing#

spacing separates the toggles with a gap (--wds-toggle-group-spacing, default 4px) instead of joining them.

Star

Heart

Bookmark

Show code

toggle-group-spacing.ts

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

@Component({
  selector: 'app-toggle-group-spacing-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="multiple" variant="outline" spacing values="star" aria-label="Favorites">
      <wds-toggle value="star">Star</wds-toggle>
      <wds-toggle value="heart">Heart</wds-toggle>
      <wds-toggle value="bookmark">Bookmark</wds-toggle>
    </wds-toggle-group>
  `,
})
export class ToggleGroupSpacingDemo {}

Vertical#

orientation="vertical" stacks the toggles; Up and Down move focus.

Show code

toggle-group-vertical.ts

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

@Component({
  selector: 'app-toggle-group-vertical-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="single" variant="outline" orientation="vertical" value="center" aria-label="Text alignment">
      <wds-toggle value="left" label="Align left"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg></wds-toggle>
      <wds-toggle value="center" label="Align center"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg></wds-toggle>
      <wds-toggle value="right" label="Align right"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg></wds-toggle>
    </wds-toggle-group>
  `,
})
export class ToggleGroupVerticalDemo {}

Disabled#

disabled turns all the toggles off.

Show code

toggle-group-disabled.ts

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

@Component({
  selector: 'app-toggle-group-disabled-demo',
  imports: [WdsToggleGroupComponent, WdsToggleComponent],
  template: `
    <wds-toggle-group type="multiple" disabled aria-label="Text formatting">
      <wds-toggle value="bold" label="Bold"><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 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg></wds-toggle>
      <wds-toggle value="italic" 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>
      <wds-toggle value="underline" 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>
    </wds-toggle-group>
  `,
})
export class ToggleGroupDisabledDemo {}

API References#

wds-toggle-group#

A set of wds-toggle buttons. With type="single" at most one is pressed (value), with type="multiple" any number (values). Arrow keys move focus between the toggles, so the group is one Tab stop.

Attributes

Attribute	Type	Default	Description
type	WdsToggleGroupType	'single'	`single`: at most one toggle pressed; `multiple`: any number.
value	string	''	Pressed value with `type="single"` (`''`: none).
values	string[]	[]	Pressed values with `type="multiple"`. The attribute takes a list: `values="bold,italic"`.
variant	WdsToggleVariant	'default'	Variant of all the toggles.
size	WdsToggleSize	'default'	Size of all the toggles.
orientation	WdsToggleGroupOrientation	'horizontal'	Layout and arrow keys: in a row (Left/Right) or in a column (Up/Down).
spacing	boolean	false	Separates the toggles with a gap (`--wds-toggle-group-spacing`, default 4px) instead of joining them.
required	boolean	false	With `type="single"`, a click on the pressed toggle does not release it, so one value is always set.
disabled	boolean	false	Disables all the toggles.

Events

Event	Description
wds-changeCustomEvent<WdsToggleGroupChangeDetail>	The user pressed or released a toggle.

Slots

Slot	Description
(default)	`wds-toggle` elements, each with a `value`.

CSS custom properties

Property	Description
--wds-toggle-group-spacing	Gap between the toggles when `spacing` is set.

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 group has role="group"; name it with aria-label (or aria-labelledby).

Every toggle is a button with aria-pressed, also with type="single", so screen readers announce which ones are pressed.

Name icon-only toggles with label.

Keyboard support#

Key	Function
Tab	Moves focus into the group (to the last focused, pressed or first toggle) and out of it.
ArrowRight	Moves focus to the next toggle (in a vertical group: ArrowDown). Wraps around.
ArrowLeft	Moves focus to the previous toggle (in a vertical group: ArrowUp). Wraps around.
Home	Moves focus to the first toggle.
End	Moves focus to the last toggle.
Space	Presses or releases the focused toggle.

Usage#

Examples#

Default#

Outline#

Single#

Segmented#

Size#

Spacing#

Vertical#

Disabled#

API References#

wds-toggle-group#

Attributes

Events

Slots

CSS custom properties

wds-toggle#

Attributes

Events

Slots

CSS parts (::part)

Accessibility#

Screen reader#

Keyboard support#