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.

import { Checkbox } from "@kernelui/react";

<Checkbox defaultChecked>Remember me</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.