Yugen UI

ToggleGroup

ToggleGroup gom các ToggleButton liên quan để chọn một hoặc nhiều tuỳ chọn trong cùng nhóm.

type="single" cho lựa chọn loại trừ (căn lề), type="multiple" cho các tuỳ chọn độc lập (đậm, nghiêng, gạch chân). Secondary/outline ghép liền viền; subtle/transparent để rời. Điều hướng bằng phím mũi tên trong nhóm.

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 { ToggleGroup, ToggleGroupItem } 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.

Chọn một (single)

Controlled; bỏ qua giá trị rỗng để luôn có một mục được chọn.

Subtle, có nhãn

appearance="subtle" — các mục để rời, mục bật có nền và icon brand.

Outline, small

Bộ chọn khoảng thời gian gọn.

Cách dùng

Nên
  • Đặt aria-label cho cả nhóm và cho từng mục chỉ có icon.
  • Dùng single cho lựa chọn loại trừ, multiple cho tuỳ chọn độc lập.
Không nên
  • Không dùng thay Tabs để chuyển nội dung trang.
  • Không đặt quá ~6 mục; nhiều hơn hãy dùng Menu hoặc Select.

Props

Prop · KiểuMặc địnhMô tả
type"single" | "multiple"Mặc định: —Bắt buộc. Chọn một hay nhiều.
value / defaultValuestring | string[]Mặc định: —Giá trị đang bật (string với single, mảng với multiple).
onValueChange(value) => voidMặc định: —Gọi khi thay đổi lựa chọn.
appearance"secondary" | "outline" | "subtle" | "transparent"Mặc định: "secondary"Secondary/outline ghép viền; subtle/transparent để rời.
size"small" | "medium" | "large"Mặc định: "medium"Kích thước mục.
orientation"horizontal" | "vertical"Mặc định: "horizontal"Hướng nhóm và phím mũi tên.
ToggleGroupItem.value / iconstring / ReactNodeMặc định: —Giá trị và icon của mục.