Checkbox
A control that allows the user to toggle between checked and not checked.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/checkbox.jsonBasic States
Default, checked, and disabled states of the checkbox.
With Labels
Checkboxes with different label configurations.
This checkbox has a descriptive text that explains what accepting this option means for the user.
You agree to our Terms of Service and Privacy Policy.
Controlled Checkbox
Checkbox with controlled state.
Status: Terms not accepted
Checkbox Groups
Multiple checkboxes for selecting multiple options.
Select Station Types
Notification Preferences
Receive email alerts for air quality updates
Get text messages for critical alerts
Receive push notifications on your device
Active Notifications:
- • None selected
Pollutant Selection
Select multiple pollutants for monitoring (controlled group).
Selected Pollutants (0):
None selected
Form Examples
Real-world form scenarios using checkboxes.
User Preferences
Station Registration
Checkbox in Lists
Checkboxes used for item selection in lists.
Riyadh • Background Station
Riyadh • Suburban Station
Riyadh • Traffic Station
Jeddah • Background Station
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state |
defaultChecked | boolean | false | Default checked state |
onCheckedChange | (checked: boolean) => void | — | Called when checked state changes |
disabled | boolean | false | Disables the checkbox |
aria-invalid | string | — | Marks checkbox as invalid |
className | string | — | Additional CSS classes |