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.
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
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"> |
Kích thước đài
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"> |
Màu sắc đài phát thanh
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"> |
đài bị vô hiệu hóa
html
1 2 | <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
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"> |
Radio with label
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> |