체크박스 구성요소
기본, 보조, 악센트 및 의미 색상 변형이 포함된 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 | 타입 | 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
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
<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> |