僅 CSS 的 Tailwind CSS 複選框，具有主要、次要、重音和語義顏色變體。尺寸 xs-xl，不確定狀態。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
複選框組件允許使用者從一組中選擇一個或多個選項。複選框使用本機 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> |
使用 Claude Code、Cursor 或其他 AI 編輯器？
Cherry MCP 為您的 AI 編輯器按需提供準確的 複選框 類別名稱和結構。不再有幻覺課程。