---
title: "Radio"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Radio using native HTML inputs. Custom colors, sizes, and grouped sets for accessible, theme-aware single-choice form controls."
url: https://frutjam.com/zh-hant/components/radio
---

# Radio Component

單選按鈕元件允許使用者從一組互斥的選項中精確選擇一個選項。單選按鈕採用本機 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     | 顏色  | 錯誤語意顏色       |

## 基本用法

## 收音機尺寸

```html
<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
<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
<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
<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
<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>
```