Switch

Material Design 3 switch web component (on/off toggle, optional thumb icons, form participation).

Example

npm install @lit-material/switch @lit-material/tokens

import "@lit-material/switch";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

Material Design 3 switch.

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`
`disabled`	`disabled`	`boolean`	`false`
`error`	`error`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`name`	`name`	`string`	`""`
`value`	`value`	`string`	`"on"`
`form`	`form`	`string \| undefined`	none
`ariaLabel`	`aria-label`	`string \| null`	`null`	Forwarded to the inner control; switches have no visible label so this is often required.
`ariaLabelledBy`	`aria-labelledby`	`string \| null`	`null`

Event	Description
`change`	Bubbles when the checked state changes via user interaction.

Slot	Description
`icon`	An optional icon shown in the thumb when unselected.
`selected-icon`	An optional icon shown in the thumb when selected.

Part	Description
`switch`	The container the track, thumb, state layer, and focus ring are rendered in.
`track`	The pill-shaped track element.
`thumb`	The circular thumb element that slides within the track.
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.