Forms

Checkbox

A label-wrapped checkbox on a native input.

stableNo JS requiredBuilt on <input type="checkbox">hydrateless/checkbox.css

A checkbox built on a native <input type="checkbox">, label-wrapped for a larger hit target. It keeps :checked, :focus-visible, the Space key, and form participation, with no JavaScript.

Checkbox

Live

Accept terms Subscribe to updates Disabled option

Props

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

Prop	Type	Default	Description
defaultChecked	boolean	—	Initial checked state (uncontrolled).
checked	boolean	—	Controlled checked state; pair with `onCheckedChange`.

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	Fill of the checked box.
--hl-border	Border of the unchecked box.
--hl-radius-sm	Corner radius of the box.

Accessibility

• Wrapping the input in a <label> makes the text a click target and labels the control.
• A real checkbox keeps Space toggling, :focus-visible, and form submission.

Related

SwitchA toggle built on a native checkbox with role="switch".Radio GroupNative radios grouped under role="radiogroup".FieldAn accessible layout wrapper for one form control.