Checkbox
Yes or no — one at a time, or many in a list (Radix Checkbox).
Preview
Default
Filter by amenity
Disabled
Usage
import { Checkbox, Label } from "zostel-ui";
<div className="flex items-center gap-2">
<Checkbox id="rules" aria-labelledby="rules-label" onCheckedChange={(checked) => setAgreed(checked === true)} />
<Label id="rules-label" htmlFor="rules">I've read the house rules</Label>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked / defaultChecked | boolean | "indeterminate" | — | Controlled / uncontrolled state. |
onCheckedChange | (checked: boolean | "indeterminate") => void | — | Called when it changes. |
disabled | boolean | false | Greys it out. On a touch screen its target is 44 px (an invisible band, so it keeps its look); give rows 44 px between them so each target is its own. |
id · aria-label · aria-labelledby | string | — | Its name, required: an id that a <Label htmlFor> points at, aria-labelledby (the id of the words beside it) or aria-label. A <label> alone names it in browsers, but axe doesn’t count a label for these button-based controls: pair htmlFor (a click on the words reaches it) with aria-labelledby, as the preview does. In a form, FormControl does both with FormLabel. In development, one that renders with no name warns in the console. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
checked / defaultCheckedboolean | "indeterminate"Controlled / uncontrolled state.
onCheckedChange(checked: boolean | "indeterminate") => voidCalled when it changes.
disabledbooleanfalseGreys it out. On a touch screen its target is 44 px (an invisible band, so it keeps its look); give rows 44 px between them so each target is its own.
id · aria-label · aria-labelledbystringIts name, required: an id that a <Label htmlFor> points at, aria-labelledby (the id of the words beside it) or aria-label. A <label> alone names it in browsers, but axe doesn’t count a label for these button-based controls: pair htmlFor (a click on the words reaches it) with aria-labelledby, as the preview does. In a form, FormControl does both with FormLabel. In development, one that renders with no name warns in the console.
classNamestringMore classes, merged with the component’s own (tailwind-merge).