A control that toggles between checked and unchecked.
$ pnpm dlx shadcn@latest add https://dashral.com/r/checkbox.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/checkbox.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/checkboxUsage
example.tsx
import { Checkbox } from "@/components/dashral/checkbox"
<Checkbox label="Email me about new releases" defaultChecked />Examples
API reference
Checkbox
Also takes every prop of Radix Checkbox(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
checked / defaultChecked | boolean | "indeterminate"Controlled or initial state. | — |
onCheckedChange | (checked: boolean | "indeterminate") => voidCalled when it's toggled. | — |
disabled / required / name / value | Like a native checkbox; it takes part in forms. | — |
label | ReactNodeBeside the control; clicking it works the control. | — |
description | ReactNodeA hint under the label. | — |
error | boolean | ReactNodetrue shows the error style; a message also shows under the label. | — |
color | "primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"The color when on, ticked or picked. | "primary" |
variant | "solid" | "outline"solid fills the box when ticked; outline colors only its border and mark. | "solid" |
labelPosition | "end" | "start""start" puts the label first and the box at the far end. | "end" |
classNames | { root, label, description, error, checkbox }Classes for each part. | — |
Keyboard
| Keys | Action |
|---|---|
| Space | Toggle |
Accessibility
- role="checkbox" with aria-checked (including "mixed").
- Give it a label (or an aria-label); the description is linked through aria-describedby.
Motion
- The check springs in from half size; the box changes color smoothly.