Components
Checkbox
A control that allows the user to toggle between checked and not checked.
Loading
Installation
pnpm dlx shadcn@latest add @toui/checkbox
Examples
Checked
Loading
Disabled
Loading
Indeterminate
Loading
Size
Loading
Form
Loading
Pattern
Tokens
7 CSS variables in 3 categories.
size
| CSS Variable | Value | Description |
|---|---|---|
--checkbox-size-sm | calc(var(--spacing) * 4) | 1rem — 16px |
--checkbox-size-md | calc(var(--spacing) * 4.5) | 1.125rem — 18px — shadcn default |
--checkbox-size-lg | calc(var(--spacing) * 5) | 1.25rem — 20px |
icon-size
| CSS Variable | Value | Description |
|---|---|---|
--checkbox-icon-size-sm | calc(var(--spacing) * 3) | 0.75rem — 12px |
--checkbox-icon-size-md | calc(var(--spacing) * 3.5) | 0.875rem — 14px |
--checkbox-icon-size-lg | calc(var(--spacing) * 4) | 1rem — 16px |
radius
| CSS Variable | Value | Description |
|---|---|---|
--checkbox-radius | var(--component-radius-xs) | var(--radius-sm) |
Credits
- Built with Radix UI Checkbox.