Yugen UI

RadioGroup

RadioGroup cho phép chọn đúng một lựa chọn trong một tập loại trừ lẫn nhau.

Nút tròn 16px viền stroke-accessible; khi chọn, viền chuyển brand và có chấm brand 10px. Nhãn chưa chọn màu foreground-3, đậm dần khi hover và khi được chọn. Tab vào nhóm, phím mũi tên để đổi lựa chọn.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { RadioGroup, Radio } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Layout ngang

layout="horizontal" khi chỉ có vài lựa chọn ngắn.

Ngang, nhãn bên dưới

layout="horizontal-stacked" — hợp với thang đo.

Disabled

Khoá một lựa chọn hoặc cả nhóm.

Giá trị: monthly

Controlled + Label

Đặt tên nhóm bằng Label + aria-labelledby.

Cách dùng

Nên
  • Dùng cho 2–7 lựa chọn loại trừ nhau mà người dùng cần thấy hết cùng lúc.
  • Chọn sẵn lựa chọn an toàn/phổ biến nhất khi hợp lý.
  • Xếp dọc khi nhãn dài; chỉ xếp ngang khi nhãn rất ngắn.
Không nên
  • Không dùng cho lựa chọn bật/tắt đơn lẻ — dùng Checkbox hoặc Switch.
  • Không dùng khi có quá nhiều lựa chọn — dùng Dropdown hoặc Combobox.

Props

Prop · KiểuMặc địnhMô tả
layout"vertical" | "horizontal" | "horizontal-stacked"Mặc định: "vertical"Bố cục nhóm.
value / defaultValuestringMặc định: —Giá trị đang chọn.
onValueChange(value: string) => voidMặc định: —Callback khi đổi.
disabled / required / nameboolean / stringMặc định: —Áp dụng cho cả nhóm.
Radio.valuestringMặc định: —Giá trị của lựa chọn.
Radio.labelReactNodeMặc định: —Nhãn bấm được.
Radio.disabledbooleanMặc định: —Khoá riêng một lựa chọn.