Switch

Completedshipped in 0.1.0BlockedStorybookFigma node 17:1201Source

Usage

When to use it

Use a toggle for one setting that takes effect immediately — “Write summary with AI” in the report builder.

From the Lumo.Web.Component.V1.0.Complete library — the Toggle description, read 2026-10-19.

Where it goes

• in a settings row, with the label naming the setting

When not to use it

• Don’t use it when the change needs a Save action; use Checkbox for that.
  • Use instead: Checkbox — not implemented in this library yet.

What each variant is for

Property	Value	What it is for
on	true	not stated in the source
on	false	not stated in the source

Variant meanings are not stated

The component description says what the component is for, never what an individual value means. Every value above is implemented and tested; what each one is for is a design decision nobody has written down.

Owner: human:designer

Accessibility

• renders a real <button role=“switch”> with aria-checked, so Space and Enter operate it and a screen reader reads the state
  src/components/switch/switch.jsx:19
• uses aria-disabled rather than the DOM disabled attribute, so a disabled switch stays focusable and can still be read
  src/components/switch/switch.jsx:78
• the node carries no label layer, so the accessible name must come from the caller via aria-label or aria-labelledby
  src/components/switch/switch.jsx:22
• the knob is aria-hidden; the parent button is the control, so the knob must not be focusable or announced
  src/components/switch/switchKnob.jsx:18

Composition

Nothing in the stories shows this component composed with another.

What this version promises

See Versioning. At 0.1.0 the public surface is the named exports of src/index.ts; this component is one of them.

This component is Blocked

Its release verdict reads Blocked, so it is documented and shipped but has not been cleared for release. Its Development status reads Completed. The reasons are in its release review; Blocked is terminal and only a human restarts it.

Owner: a human

Examples

Every story that is not a variant-matrix row, embedded live from the deployed Storybook in both themes. The matrix itself is on the Design tab.

It works — uncontrolled

It works — controlled

In context

Code

Import

import { Switch } from '@ds-house/lumo-design-system';

Props

Prop	Type	Default	Notes
on	boolean	—	Figma On. Supply it to drive the switch from your own state; leave it out and the switch keeps its own, seeded from defaultOn.
defaultOn	boolean	true	Starting value when on is not supplied. Defaults to true, which is the Figma set’s own default variant (17:1202).
disabled	boolean	false	Not a variant in Figma — see docs/switch.md, gap 3. Blocks the change and is announced, while the control stays focusable so it can be read.
onChange	(on: boolean, event: React.MouseEvent) => void	—	Called with the value the switch is moving to.
className	string	''

Tokens it needs

Token	Light	Dark
--border-radius-avatar	not in the build	—
--border-radius-chip	not in the build	—
--border-width-default	not in the build	—
--border-width-focused	not in the build	—
--color-bg-base	not in the build	—
--color-bg-primary-hovered	not in the build	—
--color-bg-primary-idle	not in the build	—
--color-bg-primary-pressed	not in the build	—
--color-border-primary-default	not in the build	—
--color-border-primary-hovered	not in the build	—
--elevation-focused	not in the build	—
--motion-duration-fast	not in the build	—
--motion-duration-instant	not in the build	—
--opacity-100	not in the build	—
--opacity-disabled	not in the build	—
--size-control-md	not in the build	—
--size-icon-sm	not in the build	—
--spacing-padding-xs	not in the build	—

A dash under Dark means the token does not change between themes.

Storybook’s own props table

Design

The Figma node

The embed may not load

The Figma file is team-only. If the frame above is blank, open the node directly from the header link — a 403 from a team-only file is expected, not a broken link.

The variant matrix

Each row as the set draws it, in both themes.

On=true

Open in Storybook

On=false

Open in Storybook

The matrix

Open in Storybook

States — not drawn in Figma

Open in Storybook

What Figma never bound, and the gaps recorded against it

The build report docs/switch.md records no “Design gaps” section.

From the build report, docs/switch.md.

Where Figma and this repo disagree across the system, see the disagreements record.

Changelog

Every commit touching this component and its subcomponents — a change to a subcomponent changes the component, and a log that reads only the parent file misses it.

Commit	Date	Shipped in	Subject
2b94809	2026-10-19	unknown	Write the ten component intent files
c8bc699	2026-10-18	unknown	Add the test suite, and retire the deliberate stop
9525e0f	2026-10-17	unknown	Make the repo a publishable npm package
75eb160	2026-10-10	unknown	Build Switch from Figma 17:1201 — two variants, four gaps reported

Generated from commit 7ccfbbb53757.