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 checkboxThen import the component:
import { Checkbox } from '@/components/ui/checkbox';Basic Usage
Default Checkbox
Variants
The Checkbox component supports four variants: default, success, warning, and destructive.
Default
Success
Warning
Destructive
Sizes
Three size options are available: sm, md, and lg. The default size is md.
Small
Medium
Large
Checkbox States
Disabled State
Enabled (unchecked)
Enabled (checked)
Disabled (unchecked)
Disabled (checked)
Form Usage
Settings Form Example
Account Settings
Customization
Custom Styling
The Checkbox component accepts a className prop for custom styling:
Scaled (1.25x)
Rounded
With shadow
With Labels
Receive email notifications about your account activity
Get updates about new features and special offers
API Reference
Checkbox Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the checkbox is checked |
onCheckedChange | (checked: boolean) => void | - | Callback fired when the checkbox state changes |
size | 'sm' | 'md' | 'lg' | 'md' | The size of the checkbox |
variant | 'default' | 'success' | 'warning' | 'destructive' | 'default' | The visual style variant |
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.
Accessibility
The Checkbox component is built with accessibility in mind:
- Uses semantic HTML with proper ARIA attributes
- Supports keyboard navigation (Space to toggle)
- Screen reader compatible
- Focus management with visible focus indicators
- Proper labeling support