仅 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 编辑器按需提供准确的 复选框 类名称和结构。不再有幻觉课程。