Switch

Turn a setting on or off.

Live example

A reviewed public example, isolated from this page.

import { Switch } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

root<button>
The sole visible role=switch button; track chrome lives here. A sibling visually-hidden native checkbox owns form behavior while Root owns aria-checked, native button activation, and synchronized state. Every associated native <label> is reflected into aria-labelledby, because HTML-AAM does not name a button from its label.
ARIA role: switch
thumb<span>
Presentational knob; aria-hidden; slides via data-state on the root (thumb mirrors state for theming).
Uses native semantics