Yugen UI

Dropdown

Dropdown cho phép chọn một lựa chọn từ listbox tuỳ biến mở ra bên dưới ô.

Khác với Select, listbox được vẽ bằng bề mặt Fluent (shadow-16, rounded-medium) nên hỗ trợ dấu tick, nhóm có tiêu đề, option disabled và nội dung tuỳ biến. Bàn phím: mũi tên, Home/End, gõ ký tự để nhảy, Enter để chọn, Esc để đóng. Khi listbox mở, trang luôn bị khoá cuộn; để giữ thanh cuộn của trang, xem Khoá cuộ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 { Dropdown, DropdownOption, DropdownGroup, DropdownDivider } 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.

Nhóm & option disabled

DropdownGroup thêm tiêu đề; các nhóm tự cách nhau bằng vạch chia.

Đã chọn: M

Controlled

value / onValueChange.

Option có icon

media đặt icon trước nhãn.

Appearance, kích thước & disabled

Cùng bộ appearance / size với Input.

Cách dùng

Nên
  • Dùng placeholder dạng hành động (“Chọn phòng ban”) khi chưa có giá trị mặc định.
  • Nhóm option bằng DropdownGroup khi danh sách có nhiều loại.
  • Giữ nhãn option ngắn, phân biệt rõ ràng.
Không nên
  • Không dùng khi chỉ có 2–3 lựa chọn luôn cần nhìn thấy — dùng RadioGroup.
  • Không dùng cho danh sách rất dài mà không cho tìm — dùng Combobox.
  • Không đặt hành động (lệnh) vào Dropdown — dùng Menu.

Props

Prop · KiểuMặc địnhMô tả
placeholderReactNodeMặc định: —Hiện khi chưa chọn.
value / defaultValuestringMặc định: —Giá trị đang chọn (controlled / uncontrolled).
onValueChange(value: string) => voidMặc định: —Callback khi chọn.
appearance"outline" | "underline" | "filled-darker" | "filled-lighter"Mặc định: "outline"Kiểu ô trigger.
size"small" | "medium" | "large"Mặc định: "medium"Chiều cao 24 / 32 / 40px.
disabled, required, nameboolean / stringMặc định: —Như form control gốc.
className / listboxClassNamestringMặc định: —Class cho trigger / bề mặt listbox.
DropdownOption.mediaReactNodeMặc định: —Icon trước nhãn option.
DropdownGroup.labelReactNodeMặc định: —Tiêu đề nhóm.