复选框组件
仅 CSS 的 Tailwind CSS 复选框，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，不确定状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
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.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| 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
<input type="checkbox" checked="checked" class="checkbox"> |
<input type="checkbox" checked="checked" className="checkbox"> |
Checkbox Sizes
html
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
html
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
html
1 2 | <input type="checkbox" class="checkbox" disabled=""> <input type="checkbox" class="checkbox" disabled="" checked="checked"> |
Checkbox Shapes
Square Checkbox
html
<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.
html
1 2 | <input type="checkbox" class="checkbox checkbox-circle" checked="checked"> <input type="checkbox" class="checkbox checkbox-rounded" checked="checked"> |
Checkboxs With Labels
html
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> |