Checkbox

A real <input type="checkbox">. The visible box is a decorative sibling <span>, styled with :checked and :indeterminate, the input itself stays exactly where you click, invisibly, so focus, keyboard toggling, and the accessibility tree all come from the real element.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Checkbox>Accept terms</Checkbox>

<kernel-checkbox>Accept terms</kernel-checkbox>

Props

Accessibility

• indeterminate sets the DOM property directly, there's no HTML attribute for it, so :indeterminate in CSS works without any extra data attributes.
• Space toggles it, clicking the label text toggles it, both for free.