Components · Form

Switch

A switch turns one setting on or off and applies the change at once. It is for a single binary choice, not for picking between options.

How to add a switch to a page. The file is components/css/switch.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules into a page, and never build the switch from a div or a button.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/switch.css">`. Both templates already have it.
2. Markup	A `label.form-switch-item` around an `input type="checkbox" role="switch"` and a `span` with the label text.
3. Size	Large is the default. Add `form-switch-item--sm` or `form-switch-item--xs`.
4. Dark surface	Add `form-switch-item--dark` on `surface-100` or `surface-80`.
5. Effect	Listen for `change` and apply the setting at once.

Switch

Copy the markup you need. Hover and focus come from :hover and :focus-visible; the [data-state] selectors in the CSS exist only so the documentation can force a state.

API

Classes

Class	Use
`form-switch-item`	The label around the input and the text. Large, light.
`form-switch-item--sm`	Small: same track, 14/20 label.
`form-switch-item--xs`	X-Small: 32×16px track.
`form-switch-item--dark`	Dark mode, for dark surfaces.

Things to know

The track is the native input with appearance: none; the thumb is its ::before.
Breakpoint: the Large label is 16/22 below 769px and 17/24 from 769px. The CSS does this by itself.
Two colors have no token (the hover and disabled On track). They are written out in the CSS with a comment.
The [data-state] selectors do nothing outside the documentation pages.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/switch.css, light and dark)