English
Vietnamese@ark-ui/react/radio-group + Tailwind CSS v4
ArkRadioGroup
Thành phần lựa chọn một mục (Radio Group) tuân thủ WAI-ARIA, tích hợp hiệu ứng inner dot animated mượt mà, đồng bộ 4 kích thước hoàn hảo với Input và Button, hỗ trợ cả Shorthand API, Compound API và RootProvider.
Đồng bộ 4 Kích thước với Input và Button
Kiểm tra đối chiếu trực quan chiều cao và căn lề giữa Button, Input và ArkRadioGroup ở các kích thước xs, sm, md, lg.
Mỗi kích thước của ArkRadioGroup sử dụng chung bộ token control-size.ts, đảm bảo khi đặt cạnh Button và Input cùng size, chiều cao và độ căn chỉnh đạt độ chính xác pixel-perfect.
xs
sm
md
lg
Cơ bản (Shorthand API)
Cú pháp gọn gàng với options mảng và defaultValue.
Chọn công nghệ mặc định
Sử dụng Shorthand API tiện dụng với mảng options, tự động tích hợp WAI-ARIA.
Có điều khiển (Controlled API)
Quản lý value qua state React và sự kiện onValueChange.
Framework được chọn
Cấu trúc ghép nối (Compound API)
Tự do ghép Root, Label, Item, ItemControl, ItemText và ItemContext.
Kiến trúc ghép nối tự do (Compound API)
Thẻ lựa chọn tùy biến (Card Selector)
Kiểu dáng thẻ chọn thanh toán / gói dịch vụ phong cách hiện đại.
Hướng hiển thị (Orientation)
Hỗ trợ cả sắp xếp theo chiều ngang (horizontal) và chiều dọc (vertical).
Ngang (Horizontal)
Dọc (Vertical)
Trình cung cấp gốc (RootProvider)
Khởi tạo state bằng hook useRadioGroup ở ngoài rồi truyền vào RootProvider.
Quản lý bằng hook useRadioGroup độc lập
Component tiện ích ArkRadio
Component tiện ích ArkRadio đóng gói cả label, description và hidden input.
Sử dụng component tiện ích ArkRadio
Các trạng thái (Interactive States)
Disabled, Read-only, Required, Invalid và vô hiệu hóa từng item độc lập.
Vô hiệu hóa toàn nhóm (Disabled)
Chỉ đọc (Read-only)
Bắt buộc (Required) + Item Disabled *
Option 2 bị disabled độc lập ở cấp item mà không ảnh hưởng cả nhóm.
Trạng thái lỗi (Invalid)
Vui lòng chọn một phương thức thanh toán hợp lệ.
Tích hợp Biểu mẫu (Form Submission)
Gửi form HTML nguyên bản với ItemHiddenInput chuẩn WAI-ARIA.