Switch

There's no native switch element yet, so this follows the WAI-ARIA switch pattern: a real <button role="switch">, which gets click, Space/Enter, and focus for free, with aria-checked telling assistive tech it's a two-state toggle rather than a regular button.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Switch>Enable notifications</Switch>

<kernel-switch>Enable notifications</kernel-switch>

Props

Accessibility

Wrapping it with label text works because <button> is a labelable element, exactly like <input>, so clicking the text toggles the switch without any extra click handler.