UI ComponentsForms
Checkbox
Select independent options with native checkbox semantics.
Import
import { Checkbox } from "@puzzle-ui/ui";Labels and states
Use a visible label (or children). description is associated with the input. indeterminate displays a mixed state without changing the checked value.
Sizes
API
| Prop | Type | Default | Description |
|---|---|---|---|
label, children | ReactNode | - | Visible label; label takes precedence. |
description | ReactNode | - | Supporting description. |
size | "sm" | "md" | "lg" | "md" | Visual size. |
indeterminate | boolean | false | Native mixed state. |
checked | boolean | - | Controlled selection. |
defaultChecked | boolean | - | Initial uncontrolled selection. |
onChange | ChangeEventHandler<HTMLInputElement> | - | Read selection from event.target.checked. |
disabled, required | boolean | false | Native disabled and required behavior. |
Other native input props and ref target the input; className and style target its wrapping label. Space toggles a focused checkbox. Provide aria-label if no visible label exists.