Checkbox
A yes or no that waits for a submit: agreeing to something, opting in. Black with a white tick when ticked, with an optional label and description. A setting that takes effect at once is a Switch instead. Built on the vendored Base UI checkbox.
Playground
import { Checkbox } from "@/components/shared/checkbox";
<Checkbox label="Remind clients the day before" />States
Empty is an ink-tint edge on white, ticked is black. Asked for and missed, the edge turns the destructive red. Disabled dims the box and ignores presses.
import { Checkbox } from "@/components/shared/checkbox";
<Checkbox aria-label="Empty" />
<Checkbox defaultChecked aria-label="Ticked" />
<Checkbox aria-invalid aria-label="Still needed" />
<Checkbox disabled aria-label="Disabled" />
<Checkbox disabled defaultChecked aria-label="Disabled, ticked" />With a label
label wraps the box in a real <label>: clicking the text ticks it, and the text names it. A description sits under the label and is read after it. A label can hold links; pressing one follows it and leaves the box as it was.
import { Checkbox } from "@/components/shared/checkbox";
<Checkbox label="Remind clients the day before" defaultChecked />
<Checkbox
label="Send me a weekly summary"
description="Every Monday, by email."
/>
<Checkbox
label={<>I agree to the <a href="/en/privacy">privacy policy</a>.</>}
aria-invalid
description="Tick this to create your studio."
/>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled state. Pair with onCheckedChange. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean, details) => void | — | Called with the new state on every tick. |
| label | ReactNode | — | Visible text in a wrapping <label>: clicking it ticks, and it names the box. Can hold links. |
| description | ReactNode | — | A quieter line under the label, read after its name. Needs label. |
| aria-invalid | boolean | — | Asked for and missed: the edge turns the destructive red. Say why in the description. |
| disabled | boolean | false | Ignores presses and dims the box; a label's text goes muted. |
| className | string | — | Layout for the outermost element: the label when there is one. |