---
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/vi/components/radio
---

# Radio Component

Các thành phần nút radio cho phép người dùng chọn chính xác một tùy chọn từ một tập hợp các lựa chọn loại trừ lẫn nhau. Được xây dựng bằng các phần tử đầu vào HTML gốc và được cải tiến bằng CSS Tailwind, các nút radio hỗ trợ nhiều kích thước, màu sắc và trạng thái. Bộ đàm có thể truy cập và điều hướng bằng bàn phím là lựa chọn lý tưởng cho các câu hỏi về lựa chọn ưu tiên, lọc và biểu mẫu một lựa chọn.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học         | Kiểu            | Sự miêu tả                                 |
| --------------- | --------------- | ------------------------------------------ |
| radio           | Căn cứ          | Đầu vào nút radio được tạo kiểu            |
| radio-circle    | Phong cách      | Đài phát thanh tròn hoàn toàn (mặc định)   |
| radio-rounded   | Phong cách      | Đài phát thanh tròn vừa phải               |
| radio-square    | Phong cách      | Đài vuông không tròn                       |
| radio-disabled  | Công cụ sửa đổi | Disabled appearance for non-input elements |
| radio-xs        | Kích cỡ         | Cực nhỏ                                    |
| radio-sm        | Kích cỡ         | Bé nhỏ                                     |
| radio-md        | Kích cỡ         | Trung bình (mặc định)                      |
| radio-lg        | Kích cỡ         | Lớn                                        |
| radio-xl        | Kích cỡ         | Cực lớn                                    |
| radio-2xl       | Kích cỡ         | 2× extra large                             |
| radio-primary   | Màu sắc         | Màu chủ đề chính                           |
| radio-secondary | Màu sắc         | Màu chủ đề phụ                             |
| radio-accent    | Màu sắc         | Màu chủ đề nhấn mạnh                       |
| radio-neutral   | Màu sắc         | Màu chủ đề trung tính                      |
| radio-info      | Màu sắc         | Màu sắc ngữ nghĩa thông tin                |
| radio-success   | Màu sắc         | Màu ngữ nghĩa thành công                   |
| radio-warning   | Màu sắc         | Màu ngữ nghĩa cảnh báo                     |
| radio-error     | Màu sắc         | Lỗi ngữ nghĩa màu sắc                      |

## Cách sử dụng cơ bản

## Kích thước đài

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

## Màu sắc đài phát thanh

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

## đài bị vô hiệu hóa

```html
<input type="radio" class="radio" disabled="">
<input type="radio" class="radio" disabled="" checked="checked">
```

## Hình dạng đài phát thanh

### Square Radio

```html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked">
```

### Rounded or Circle Radio

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

## Radio with label

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