Checkbox
Selects any number of options from a set, or turns a single one on and off.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
3 examplesUnchecked
md
lg
Checked
md
lg
With description
We only email you about incidents on your own services.
mdWe only email you about incidents on your own services.
lgStates
6 examplesHover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled
Checked hover
Rest
Checked hover
Pressed
Rest
Pressed
Disabled checked
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Controlled checked state. |
| defaultChecked | boolean | false | Uncontrolled initial state. |
| onCheckedChange | (next: boolean) => void | - | Handler called with the next checked state when toggled. |
| label | string | - | Optional inline label. |
| description | React.ReactNode | - | Helper line under the label; the box aligns to the first line and the input is described by it. |
| size | 'md'|'lg' | 'md' | Two rungs, 16 and 20px boxes, scaling the box, its tick and the label together. There is no `sm`: below 16px the box stops reading as a checkbox and the label falls under the legibility floor. |
| disabled | boolean | false | Disables the checkbox and blocks interaction. |
| className | string | - | Extra classes merged onto the visual box. |
| style | React.CSSProperties | - | Inline styles applied to the outer wrapper. |
| id | string | - | Id applied to the input and inline label, auto-generated if omitted. |
AI Canvas