Checkbox Component
CSS-only Tailwind CSS checkbox with primary, secondary, accent, and semantic color variants. Sizes xs–xl, indeterminate state. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
複選框組件允許使用者從一組中選擇一個或多個選項。複選框使用本機 HTML 輸入元素建立並使用 Tailwind CSS 增強，支援多種尺寸、顏色和狀態。透過鍵盤導航和螢幕閱讀器支援完全可訪問，複選框在表單、過濾器選項和權限管理介面中無縫工作。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| checkbox | 根據 | 樣式化的複選框輸入 |
| checkbox-circle | 風格 | 全圓形複選框 |
| checkbox-rounded | 風格 | 中等圓角的複選框 |
| checkbox-square | 風格 | 沒有四捨五入的方形複選框 |
| checkbox-disabled | 修飾符 | 非輸入元素的禁用外觀 |
| checkbox-xs | 尺寸 | 特小號 |
| checkbox-sm | 尺寸 | 小的 |
| checkbox-md | 尺寸 | 中（預設） |
| checkbox-lg | 尺寸 | 大的 |
| checkbox-xl | 尺寸 | 特大號 |
| checkbox-2xl | 尺寸 | 2×特大號 |
| checkbox-primary | 顏色 | 主要主題顏色 |
| checkbox-secondary | 顏色 | 次要主題色 |
| checkbox-accent | 顏色 | 強調主題顏色 |
| checkbox-neutral | 顏色 | 中性主題色 |
| checkbox-info | 顏色 | 訊息語意顏色 |
| checkbox-success | 顏色 | 成功語意色 |
| checkbox-warning | 顏色 | 警告語意顏色 |
| checkbox-error | 顏色 | 錯誤語意顏色 |
基本用法
<input type="checkbox" checked="checked" class="checkbox"> |
<input type="checkbox" checked="checked" className="checkbox"> |
複選框尺寸
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"> |
複選框顏色
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"> |
禁用複選框
html
1 2 | <input type="checkbox" class="checkbox" disabled=""> <input type="checkbox" class="checkbox" disabled="" checked="checked"> |
複選框形狀
方形複選框
html
<input type="checkbox" class="checkbox checkbox-square" checked="checked"> |
圓形/圓形複選框
checkbox-circle 和 checkbox-rounded 這兩個類別都會產生相同的視覺樣式，從而允許靈活的命名約定。
html
1 2 | <input type="checkbox" class="checkbox checkbox-circle" checked="checked"> <input type="checkbox" class="checkbox checkbox-rounded" checked="checked"> |
帶標籤的複選框
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> |