Radio Component
CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
單選按鈕元件允許使用者從一組互斥的選項中精確選擇一個選項。單選按鈕採用本機 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> |