純 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 編輯器按需提供準確的 收音機 類別名稱和結構。不再有幻覺課程。