Components
- Accordion
- Action Bar
- Alert Dialog
- Alert
- Announcement
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Bottom Navigation
- Breadcrumb
- Button Group
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Circular Progress
- Circular Slider
- Clipboard
- Collapsible
- Color Picker
- Combobox
- Command
- Context Menu
- Data List
- Date Picker
- Dialog
- Drawer
- Editable
- Field
- File Upload
- Float
- Floating Panel
- Frame
- Hint
- Hover Card
- Image Cropper
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Link Overlay
- Listbox
- Marquee
- Menu
- Native Select
- Number Input
- Pagination
- Popover
- Progress
- Prose
- QR Code
- Radio Group
- Rating
- Resizable
- Scroll Area
- Segment Group
- Select
- Separator
- Sheet
- Sidebar
- Signature Pad
- Skeleton
- Skip Nav
- Slider
- Spinner
- Status
- Steps
- Switch
- Table
- Tabs
- Textarea
- Timer
- Toast
- Toggle Group
- Toggle Tooltip
- Toggle
- Tooltip
- Tour
- Tree View
You'll receive a notification when someone posts a comment
Installation
pnpm dlx shadcn@latest add https://shark.vini.one/r/checkbox.json
Usage
import { Checkbox } from "@/components/ui/checkbox";
<Checkbox />
Controlled
Use the checked prop to control the checkbox.
❌
State
Invalid
Use the invalid prop to indicate an invalid state.
Disabled
Use the disabled prop to disable the checkbox.
Examples
With Description
Use <FieldDescription /> to add a description to the checkbox.
You'll receive a notification when someone posts a comment on your post
Indeterminate
Use the checked="indeterminate" prop to set the checkbox to an indeterminate state.
Group
Use <CheckboxGroup /> to group multiple checkboxes together.
Card Style
Use <FieldLabel /> to add a label to the checkbox.
API Reference
Checkbox
Checkbox control for boolean or multi-select state.
| Prop | Type | Default |
|---|---|---|
checked | boolean | 'indeterminate' | - |
defaultChecked | boolean | false |
disabled | boolean | false |
name | string | - |
value | string | - |
onCheckedChange | ({ checked }: CheckedChangeDetails) => void | - |
className | string | - |
CheckboxGroup
Groups related checkboxes with consistent layout.
| Prop | Type | Default |
|---|---|---|
value | string[] | - |
defaultValue | string[] | - |
onValueChange | (checkedValues: string[]) => void | - |
name | string | - |
className | string | - |
For a complete list of props, see the Ark UI documentation.