Select
Mẫu chuẩnChọn một giá trị từ danh sách đã biết. Không tìm kiếm, không chọn nhiều. Viền và ba size đi cùng Input và Button.
Playground
Danh sách được portal ra ngoài vùng brand, nên panel theo theme của trang. Trigger theo brand đang chọn.
import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@nexobox/ui";
<Label htmlFor="city">Tỉnh</Label>
<Select>
<SelectTrigger id="city">
<SelectValue placeholder="Chọn tỉnh" />
</SelectTrigger>
<SelectContent>
<SelectItem value="hcm">Hồ Chí Minh</SelectItem>
</SelectContent>
</Select>Khi nào sử dụng
Nên dùng
Một lựa chọn từ danh sách đã biết: tỉnh, trạng thái, kênh. Đi với Label.
Tránh dùng
Chữ tự do thì dùng Input. Không tìm kiếm, không chọn nhiều. Menu điều hướng thì không phải Select. Việc chặn trang thì dùng Dialog.
Anatomy
SelectTrigger size md cao 40 px, cùng thang với Button và Input. Viền rest là --nf-component-field-border, giống Input và resolve về --nf-semantic-border-control. Chevron và dấu chọn là Icon small, 16px, vì chúng là dấu cạnh chữ ui, không phải icon nội dung 20px. Vùng bấm vẫn là chiều cao field. SelectValue hiện lựa chọn hoặc placeholder. SelectContent là danh sách, portal ra body trên lớp --nf-foundation-layer-dialog — cùng lớp với Dialog và Sheet, trên lớp màn che — nên danh sách vẫn mở được khi Select nằm trong hai lớp đó. Panel danh sách giữ viền trang trí --nf-semantic-border-subtle. SelectItem là một dòng, cao 36 px ở comfortable — rời khỏi thang hàng bảng cũ (48 px), neo vào --nf-component-menu-item-height riêng của menu. Compact chỉ hạ size md xuống 36 px; sm giữ 36 px và lg giữ 44 px. Con trỏ thô nâng vùng bấm lên sàn 44 px.
States
Token field. Tên lấy từ Label hoặc aria-label.
Nền --nf-component-select-trigger-hover.
Nền --nf-component-select-trigger-pressed. Không co scale — DS-018 rút press-scale khỏi mọi primitive.
Vòng focus trên trigger. Không chỉ dựa vào màu.
Không mở được. Không nằm trong thứ tự Tab.
Trigger hiện Hà Nội. Mở danh sách thì dòng đó dùng nav-selected.
Danh sách dùng lớp dialog, nên vẫn chọn được trong Dialog và Sheet.
Không có empty, loading, hay invalid. Không có prop error. Danh sách mở khi bấm trigger ở trạng thái Default.
Design tokens
Viền rest của trigger đọc --nf-component-field-border và bóng --nf-component-field-shadow, cùng Input. Viền border-subtle chỉ còn trên panel danh sách trang trí. Size md đọc --nf-component-field-height; sm và lg đọc chiều cao Button tương ứng. Trigger còn lại đọc --nf-component-field-*, --nf-component-select-trigger-hover và -trigger-pressed ở hover/nhấn — alias riêng của Select, không bind thẳng token semantic. Danh sách đọc --nf-component-menu-radius, --nf-component-overlay-shadow, --nf-motion-menu-in, --nf-foundation-layer-dialog. Item đọc --nf-component-menu-item-height, -item-hover, -item-pressed, -item-padding-inline. Dòng chọn đọc --nf-component-nav-selected-*.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| value / onValueChange | — | Một giá trị. Không chọn nhiều. |
| disabled | false | Đặt trên Select. Trigger không mở. |
| placeholder | — | Trên SelectValue. Không thay Label. |
| size | md | Trên SelectTrigger. sm 36 px, md 40 px (36 px khi compact), lg 44 px. |