Yugen UI

Select

Select cho phép chọn một giá trị từ danh sách bằng thẻ select gốc của trình duyệt.

Dùng thẻ <select> native nên danh sách mở ra theo giao diện hệ điều hành — rất hợp với thiết bị di động và form đơn giản. Cần option có icon, nhóm tuỳ biến hay giao diện đồng nhất thì dùng Dropdown.

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 { Select, Field } 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.

Appearance

outline (mặc định), underline, filled-darker, filled-lighter.

Kích thước

small (24px), medium (32px), large (40px).

Nhóm option & disabled

optgroup gom nhóm; option hoặc cả Select đều có thể disabled.

Cách dùng

Nên
  • Dùng cho danh sách ngắn đến trung bình, giá trị là văn bản thuần.
  • Ưu tiên Select trong form trên di động — picker hệ điều hành dễ thao tác.
  • Sắp xếp option theo thứ tự có ý nghĩa (chữ cái, tần suất, logic).
Không nên
  • Không dùng khi option cần icon, avatar hay mô tả phụ — dùng Dropdown.
  • Không dùng cho danh sách rất dài cần tìm kiếm — dùng Combobox.

Props

Prop · KiểuMặc địnhMô tả
appearance"outline" | "underline" | "filled-darker" | "filled-lighter"Mặc định: "outline"Kiểu ô.
size"small" | "medium" | "large"Mặc định: "medium"Chiều cao 24 / 32 / 40px.
classNamestringMặc định: —Class cho khung ngoài (đặt width).
selectClassNamestringMặc định: —Class cho chính thẻ select.
value, defaultValue, onChange, disabled…SelectHTMLAttributesMặc định: —Thuộc tính gốc của select.