Checkbox
A 16px square checkbox measured from Attio's record grid.
Measured from Attio's grid — 16px, r6, a subtle 1px inset ring when empty, a brand fill + white check when on. It's a real <input type="checkbox">, so keyboard, focus, and form semantics come for free.
Preview
Installation
bun add crispimport "crisp/styles.css";
import { Checkbox } from "crisp";Usage
import { Checkbox } from "crisp";
export function Example() {
return <Checkbox checked onChange={(e) => console.log(e.target.checked)} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
indeterminate | boolean | false | Renders the mixed (dash) state — for a partially-on select-all. |
asChild | boolean | false | Render the passed child element instead of an <input>. |
All other native <input> props (checked, defaultChecked, onChange, disabled, aria-label, …) are forwarded.
Accessibility
Renders a native checkbox, so it is focusable and toggles with Space out of the box. indeterminate is a DOM-only property (not an attribute), applied via ref — screen readers announce it as "mixed". Always give an unlabelled checkbox an aria-label.