ComboBox

Forms

Dropdown kết hợp tìm kiếm, hỗ trợ single và multi-select với autocomplete.

Single + Autocomplete

Framework

Multi-select

Chọn nhiều giá trị, hiển thị dạng chips.

Công nghệ sử dụng

No Autocomplete

Chỉ chọn từ list, không gõ tìm kiếm.

Framework cố định

Multi No Autocomplete

Danh sách cố định

Với icon

Thêm icon bên trái để tăng nhận diện trực quan.

Framework

Loading

Hiển thị spinner trên trigger khi đang fetch dữ liệu từ server.

Framework

Required & Error

Đánh dấu trường bắt buộc và hiển thị thông báo lỗi validation.

Framework*

Vui lòng chọn ít nhất một framework.

API Reference

Prop	Type	Default	Mô tả
`options`	`{ label: string; value: string }[]`	—	Danh sách lựa chọn (bắt buộc)
`value`	`string \| string[]`	—	Giá trị đang chọn (controlled). string cho single, string[] cho multiple
`defaultValue`	`string \| string[]`	—	Giá trị khởi tạo cho uncontrolled usage
`onValueChange`	`(value: string \| string[]) => void`	—	Callback khi giá trị thay đổi
`onChange`	`(value: string \| string[]) => void`	—	Alias của onValueChange — tương thích với React Hook Form
`multiple`	`boolean`	`false`	Bật multi-select, hiển thị giá trị đã chọn dạng chips
`autocomplete`	`boolean`	`true`	Bật lọc options theo text người dùng đang gõ
`label`	`string`	—	Label hiển thị phía trên combobox
`placeholder`	`string`	—	Placeholder text
`leftIcon`	`ReactNode`	—	Icon hiển thị bên trái input
`emptyText`	`string`	`"No results found."`	Text hiển thị khi không có option nào khớp filter
`selectAllText`	`string`	`"Select all"`	Label nút chọn tất cả (chỉ multi-select)
`clearAllText`	`string`	`"Clear all"`	Label nút bỏ chọn tất cả (chỉ multi-select)
`isLoading`	`boolean`	—	Hiển thị spinner trên trigger khi đang tải dữ liệu
`required`	`boolean`	—	Đánh dấu trường bắt buộc, hiển thị dấu * đỏ sau label
`error`	`string`	—	Thông báo lỗi hiển thị bên dưới combobox
`clearValue`	`string \| null`	`null (single) / [] (multiple)`	Giá trị emit qua onValueChange/onChange khi nhấn nút xoá. Mặc định emit "" (single) hoặc [] (multiple) để React Hook Form nhận được value hợp lệ
`className`	`string`	—	Class CSS tuỳ chỉnh cho wrapper ngoài cùng