Forms

Switch

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

stableNo JS requiredBuilt 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	—	Controlled state; pair with `onCheckedChange`.
defaultChecked	boolean	—	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.