docs/components/checkbox
Sections
Components
Utilities
Forms
Hooks
Copy Markdown
Control for multiple selections in a set.
PreviewCode
Accept terms and conditions
Receive notifications
You'll receive a notification when someone posts a comment
Receive marketing emails
CLIManual
pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/checkbox
import { Checkbox } from "@/components/ui/checkbox";
<Checkbox />
Use the checked and onCheckedChange props to control the checkbox state programmatically.
PreviewCode
Accept terms and conditions
❌
Use the invalid prop to indicate an invalid state.
PreviewCode
Accept terms and conditions
Use the disabled prop to disable the checkbox.
PreviewCode
Receive newsletter
PreviewCode
Receive notifications
You'll receive a notification when someone posts a comment on your post
PreviewCode
Select all items
PreviewCode
Show these items on the desktop:
Select the items you want to show on the desktop.
Hard disks
External disks
CDs, DVDs, and iPods
Connected servers
PreviewCode
Enable notifications
You can enable or disable notifications at any time.
Checkbox control for boolean or multi-select state.
| Prop | Type | Default |
|---|---|---|
checked | `boolean | 'indeterminate'` |
defaultChecked | boolean | false |
disabled | boolean | false |
checked | `boolean | 'indeterminate'` |
onCheckedChange | ({ checked }: CheckedChangeDetails) => void | - |
className | string | - |
Groups related checkboxes with consistent layout.
| Prop | Type | Default |
|---|---|---|
value | string[] | - |
defaultValue | string[] | [] |
onValueChange | (details: ValueChangeDetails) => void | - |
className | string | - |
For a complete list of props, see the Ark UI documentation.
[
Previous page
Chart ](/docs/components/chart)[
Next page
Circular Progress ](/docs/components/circular-progress)
On This Page
InstallationUsageControlledStatesInvalidDisabledExamplesWith DescriptionIndeterminateGroupCard StyleAPI ReferenceCheckboxCheckboxGroup