Forms

Switch

A toggle built on a native checkbox with role="switch".

stableCSS onlyBuilt on <input type="checkbox">hydrateless/switch.css

A toggle switch built on a native checkbox with role="switch". Because it is a real checkbox, it participates in forms, supports :checked, :focus-visible, and the Space key, and is announced correctly by assistive technology. No JavaScript.

Playground

Live

Enable notifications

CheckedDisabledLabel

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
checked	boolean	Not set	Controlled state; pair with the native `onChange` in React (Vue: `v-model`, Svelte: `bind:checked`).
defaultChecked	boolean	Not set	Initial state (uncontrolled).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Track color when on.
--hl-border	Track color when off.

Accessibility

• role="switch" makes assistive tech announce "on/off" rather than "checked".
• A native checkbox underneath keeps Space toggling and form submission.

Related

CheckboxA label-wrapped checkbox on a native input.FieldAn accessible layout wrapper for one form control.