English
VietnameseArk UI + Tailwind v4app/components/ui/ark-selectUnified ControlSize Ready
Ark Select Component
Thành phần hộp chọn lựa (Select) thế hệ mới được xây dựng trên nền tảng @ark-ui/react/select và Tailwind CSS v4. Được thiết kế theo contract kích thước chuẩn hóa ControlSize (xs, sm, md, lg), đảm bảo chiều cao, padding, typography và baseline đồng bộ 100% khi đặt cạnh Input và Button.
4 kích thước chuẩn hóa (28px / 32px / 36px / 44px)
Hỗ trợ Single / Multiple / Grouping
Tích hợp sâu Remix Hook Form (SelectField)
Bảng so khớp kích thước với Input & Button
Đồng bộ kích thướcKiểm tra pixel-perfect giữa Input, ArkSelect và Button trên cùng một hàng theo 4 kích thước chuẩn
Nguyên lý đồng bộ: Cả ba thành phần đều sử dụng chung token controlSizeClassNames từ app/components/ui/control-size.ts, kiểm soát đồng thời h-(--control-height), px-(--control-padding-x), gap-(--control-gap) và [&_svg]:size-(--control-icon-size).
XSExtra Small (XS)(Phù hợp bảng dữ liệu nén, toolbar nhỏ gọn, tags filter)
Chiều cao: 28pxPadding-X: 10pxIcon: 14px
React.js
Thư viện UI phổ biến nhất cho web hiện đại
Vue.js
Framework tiến bộ với cú pháp SFC dễ tiếp cận
Next.js
React Framework cho ứng dụng fullstack
Remix / React Router
Web framework tập trung vào Web Standards
Svelte
Cybernetically enhanced web apps
Angular
Nền tảng ứng dụng cấp doanh nghiệp của Google
SMSmall (SM)(Phù hợp sidebar, modal filter, form mật độ dày)
Chiều cao: 32pxPadding-X: 12pxIcon: 16px
React.js
Thư viện UI phổ biến nhất cho web hiện đại
Vue.js
Framework tiến bộ với cú pháp SFC dễ tiếp cận
Next.js
React Framework cho ứng dụng fullstack
Remix / React Router
Web framework tập trung vào Web Standards
Svelte
Cybernetically enhanced web apps
Angular
Nền tảng ứng dụng cấp doanh nghiệp của Google
MDMedium (MD) - Default(Kích thước tiêu chuẩn cho hầu hết form và trang quản trị)
Chiều cao: 36pxPadding-X: 14pxIcon: 18px
React.js
Thư viện UI phổ biến nhất cho web hiện đại
Vue.js
Framework tiến bộ với cú pháp SFC dễ tiếp cận
Next.js
React Framework cho ứng dụng fullstack
Remix / React Router
Web framework tập trung vào Web Standards
Svelte
Cybernetically enhanced web apps
Angular
Nền tảng ứng dụng cấp doanh nghiệp của Google
LGLarge (LG)(Phù hợp form đăng nhập, checkout, banner tìm kiếm chính)
Chiều cao: 44pxPadding-X: 16pxIcon: 20px
React.js
Thư viện UI phổ biến nhất cho web hiện đại
Vue.js
Framework tiến bộ với cú pháp SFC dễ tiếp cận
Next.js
React Framework cho ứng dụng fullstack
Remix / React Router
Web framework tập trung vào Web Standards
Svelte
Cybernetically enhanced web apps
Angular
Nền tảng ứng dụng cấp doanh nghiệp của Google
Playground tương tác thời gian thực
Live DemoThử nghiệm toàn diện các trạng thái, thuộc tính và cấu hình của ArkSelect
Cấu hình thuộc tính
Kích thước (size)
Kiểu hiển thị (variant)
React.js
Thư viện UI phổ biến nhất cho web hiện đại
Vue.js
Framework tiến bộ với cú pháp SFC dễ tiếp cận
Next.js
React Framework cho ứng dụng fullstack
Remix / React Router
Web framework tập trung vào Web Standards
Svelte
Cybernetically enhanced web apps
Angular
Nền tảng ứng dụng cấp doanh nghiệp của Google
Chọn công nghệ phù hợp với kiến trúc dự án
Trạng thái giá trị (Selected State):Single
value: ["react"]
Multiple Selection
Chọn nhiềuChọn nhiều mục với hiển thị số lượng và danh sách tags đã chọn
React.js
Thư viện UI phổ biến nhất cho web hiện đại
Vue.js
Framework tiến bộ với cú pháp SFC dễ tiếp cận
Next.js
React Framework cho ứng dụng fullstack
Remix / React Router
Web framework tập trung vào Web Standards
Svelte
Cybernetically enhanced web apps
Angular
Nền tảng ứng dụng cấp doanh nghiệp của Google
Có thể nhấp chọn nhiều mục, bấm lại để hủy chọn
Đã chọn (2):React.jsRemix / React Router
Grouped Items
Phân nhómPhân nhóm tùy chọn theo danh mục với ItemGroup và ItemGroupLabel
Frontend
React.js
Vue.js
Svelte
Tailwind CSS v4
Backend
Node.js
NestJS
Go (Golang)
Rust
Database
PostgreSQL
Redis Cache
ClickHouse
Giá trị đang chọn: postgres
Tùy biến mục danh sách phong phú (Rich Items)
Rich UIHiển thị icon, tiêu đề phụ và badge trạng thái bên trong mỗi mục chọn
Quản trị viên (Super Admin)
Toàn quyền truy cập và cấu hình hệ thống
Biên tập viên (Editor)
Tạo, chỉnh sửa và xuất bản nội dung
Người thẩm duyệt (Moderator)
Kiểm duyệt bài viết và bình luận người dùng
Cộng tác viên (Contributor)
Gửi bài viết cần xét duyệt
Khách xem (Viewer)
Chỉ có quyền đọc tài nguyên được cấp phép
Mỗi vai trò đi kèm mô tả quyền hạn cụ thể
Compound Component Pattern
AnatomySử dụng trực tiếp các thành phần nguyên tử khi cần cấu trúc giao diện đặc thù
ArkSelect xuất bản đầy đủ các thành phần compound: ArkSelect.Root, ArkSelect.Trigger, ArkSelect.ValueText, ArkSelect.Indicator, ArkSelect.ClearTrigger, ArkSelect.Positioner, ArkSelect.Content, ArkSelect.Item...
<ArkSelect.Root collection={collection} size="md">
<ArkSelect.Label>Tiêu đề</ArkSelect.Label>
<ArkSelect.Control>
<ArkSelect.Trigger clearable>
<ArkSelect.ValueText placeholder="Chọn..." />
</ArkSelect.Trigger>
<div className="pointer-events-none absolute end-(--control-padding-x) top-1/2 z-1 flex -translate-y-1/2 items-center gap-(--control-gap)">
<ArkSelect.ClearTrigger className="pointer-events-auto [&_svg]:size-(--control-icon-size)" />
<ArkSelect.Indicator />
</div>
</ArkSelect.Control>
<ArkSelect.Positioner>
<ArkSelect.Content>
{collection.items.map((item) => (
<ArkSelect.Item key={item.value} item={item}>
<ArkSelect.ItemText>{item.label}</ArkSelect.ItemText>
<ArkSelect.ItemIndicator />
</ArkSelect.Item>
))}
</ArkSelect.Content>
</ArkSelect.Positioner>
<ArkSelect.HiddenSelect />
</ArkSelect.Root>Tích hợp Remix Hook Form (SelectField)
Form IntegrationThành phần SelectField kế thừa ArkSelect, tích hợp tự động với react-hook-form, Field.Root, validation và submit