Forms

Checkbox

A label-wrapped checkbox on a native input.

stableCSS onlyEnhancer: enhanceCheckboxBuilt 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. Wrap several in a data-hl-checkbox-group and the optional enhancer adds a select-all box with a real indeterminate state and reports the checked values.

Checkbox

Live

Accept terms Subscribe to updates Disabled option

Group with select all

The data-hl-checkbox-all box mirrors the group: checked when every box is, indeterminate when only some are. Toggling it checks or clears every enabled box. Boxes added to the group later join automatically.

Live

Notifications

All notifications Mentions Replies Weekly digest

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceCheckbox } from '@hydrateless/enhancers/checkbox';

const handle = enhanceCheckbox(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

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

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

Events and callbacks

Event / Callback	Payload	Description
hl:change	{ value: string[] }	Fires from an enhanced group with the checked values after every change (also the `onValueChange` callback).

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.
• The select-all box uses the native indeterminate property, which screen readers announce as "mixed".

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.