Checkbox Component
A fully accessible checkbox component built with native HTML inputs and Tailwind CSS. Capture binary and multi-select user input with custom styling, color variants, and size options. Supports indeterminate states, disabled modes, and label integration for accessible, theme-aware forms.
Checkbox components allow users to select one or multiple options from a set. Built with native HTML input elements and enhanced with Tailwind CSS, checkboxes support multiple sizes, colors, and states. Fully accessible with keyboard navigation and screen reader support, checkboxes work seamlessly in forms, filter options, and permission management interfaces.
| Class | Type | Description |
|---|---|---|
| checkbox | Base | Styled checkbox input |
| checkbox-circle | Style | Fully circular checkbox |
| checkbox-rounded | Style | Moderately rounded checkbox |
| checkbox-square | Style | Square checkbox with no rounding |
| checkbox-disabled | Modifier | Disabled appearance for non-input elements |
| checkbox-xs | Size | Extra small |
| checkbox-sm | Size | Small |
| checkbox-md | Size | Medium (default) |
| checkbox-lg | Size | Large |
| checkbox-xl | Size | Extra large |
| checkbox-2xl | Size | 2× extra large |
| checkbox-primary | Color | Primary theme color |
| checkbox-secondary | Color | Secondary theme color |
| checkbox-accent | Color | Accent theme color |
| checkbox-neutral | Color | Neutral theme color |
| checkbox-info | Color | Info semantic color |
| checkbox-success | Color | Success semantic color |
| checkbox-warning | Color | Warning semantic color |
| checkbox-error | Color | Error semantic color |
Basic Usage
1 | <input type="checkbox" checked="checked" class="checkbox"> |
1 | <input type="checkbox" checked="checked" className="checkbox"> |
Checkbox Sizes
1 2 3 4 5 6 | <input type="checkbox" checked="checked" class="checkbox checkbox-xs"> <input type="checkbox" checked="checked" class="checkbox checkbox-sm"> <input type="checkbox" checked="checked" class="checkbox checkbox-md"> <input type="checkbox" checked="checked" class="checkbox checkbox-lg"> <input type="checkbox" checked="checked" class="checkbox checkbox-xl"> <input type="checkbox" checked="checked" class="checkbox checkbox-2xl"> |
Checkbox Colors
1 2 3 4 5 6 7 8 9 | <input type="checkbox" checked="checked" class="checkbox"> <input type="checkbox" checked="checked" class="checkbox checkbox-primary"> <input type="checkbox" checked="checked" class="checkbox checkbox-secondary"> <input type="checkbox" checked="checked" class="checkbox checkbox-accent"> <input type="checkbox" checked="checked" class="checkbox checkbox-info"> <input type="checkbox" checked="checked" class="checkbox checkbox-success"> <input type="checkbox" checked="checked" class="checkbox checkbox-warning"> <input type="checkbox" checked="checked" class="checkbox checkbox-error"> <input type="checkbox" checked="checked" class="checkbox checkbox-neutral"> |
Disabled Checkboxs
1 2 | <input type="checkbox" class="checkbox" disabled=""> <input type="checkbox" class="checkbox" disabled="" checked="checked"> |
Checkbox Shapes
Square Checkbox
1 | <input type="checkbox" class="checkbox checkbox-square" checked="checked"> |
Circle / Rounded Checkbox
The checkbox-circle and checkbox-rounded both classes result in the same visual style, allowing for flexible naming conventions.
1 2 | <input type="checkbox" class="checkbox checkbox-circle" checked="checked"> <input type="checkbox" class="checkbox checkbox-rounded" checked="checked"> |
Checkboxs With Labels
1 2 | <input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked"> <label for="newsletter">Subscribe to our newsletter</label> |