Checkbox
A versatile checkbox component for forms and selections with multiple variants, sizes and dark mode support
Installation
Install the Checkbox component using the nocta-ui CLI:
npx nocta-ui add checkboxImport the component:
import { Checkbox } from '@/components/ui/checkbox';Examples
Default Checkbox
Sizes
Three size options are available: sm, md, and lg. The default size is md.
Small
Medium
Large
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the checkbox is checked |
defaultChecked | boolean | false | Initial checked state (uncontrolled) |
onCheckedChange | (checked: boolean) => void | - | Callback fired when the checkbox state changes |
size | 'sm' | 'md' | 'lg' | 'md' | The size of the checkbox |
disabled | boolean | false | Whether the checkbox is disabled |
className | string | '' | Additional CSS classes to apply |
id | string | - | The id attribute for the checkbox input |
The Checkbox component also accepts all standard HTML input element props through the ...props spread operator.