Checkboxes
Our checkbox components allow users to select multiple options from a list or toggle features.
Interactive Checkbox Demo
Current Configuration: unchecked state.
Checkbox States
Light Mode
Dark Mode
Checkbox Lists
Simple List
User Roles
Bulk Selection
Checkbox Specifications
| State | Border Color | Background | Icon | Size |
|---|---|---|---|---|
| Unchecked | Border | Background | None | 20px |
| Checked | Primary-500 | Primary-500 | Check (Primary-foreground) | 20px |
| Indeterminate | Primary-500 | Primary-500 | Minus (Primary-foreground) | 20px |
| Hover | Primary-300 | Primary-50 / Primary-900 | None | 20px |
| Disabled | Neutral-100 | Neutral-50 / Neutral-800 | None | 20px |