纯 CSS Tailwind CSS 单选按钮，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
单选按钮组件允许用户从一组互斥的选项中精确选择一个选项。单选按钮采用本机 HTML 输入元素构建并通过 Tailwind CSS 增强，支持多种尺寸、颜色和状态。收音机易于使用且可通过键盘导航，是偏好选择、过滤和单选表单问题的理想选择。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| radio | 根据 | 样式单选按钮输入 |
| radio-circle | 风格 | 全圆形收音机（默认） |
| radio-rounded | 风格 | 适度圆润的收音机 |
| radio-square | 风格 | 没有四舍五入的方形收音机 |
| radio-disabled | 修饰符 | 非输入元素的禁用外观 |
| radio-xs | 尺寸 | 特小号 |
| radio-sm | 尺寸 | 小的 |
| radio-md | 尺寸 | 中（默认） |
| radio-lg | 尺寸 | 大的 |
| radio-xl | 尺寸 | 特大号 |
| radio-2xl | 尺寸 | 2×特大号 |
| radio-primary | 颜色 | 主要主题颜色 |
| radio-secondary | 颜色 | 次要主题色 |
| radio-accent | 颜色 | 强调主题颜色 |
| radio-neutral | 颜色 | 中性主题色 |
| radio-info | 颜色 | 信息语义颜色 |
| radio-success | 颜色 | 成功语义色 |
| radio-warning | 颜色 | 警告语义颜色 |
| radio-error | 颜色 | 错误语义颜色 |
基本用法
1 2 | <input type="radio" name="radio-1" class="radio" checked="checked"> <input type="radio" name="radio-1" class="radio"> |
1 2 | <input type="radio" name="radio-1" className="radio" checked="checked"> <input type="radio" name="radio-1" className="radio"> |
收音机尺寸
html
1 2 3 4 5 | <input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-md" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked"> |
无线电颜色
html
1 2 3 4 5 6 7 8 9 | <input type="radio" name="radio-colors" class="radio" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-primary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-accent" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-info" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-success" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-warning" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-error" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked"> |
禁用无线电
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
无线电形状
方形收音机
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
圆形或圆形收音机
html
1 2 | <input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked"> <input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked"> |
带标签的收音机
html
1 2 3 4 5 6 7 8 | <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small"> <label for="size-small">Small</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium"> <label for="size-medium">Medium</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large"> <label for="size-large">Large</label> |
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 收音机 类名称和结构。不再有幻觉课程。