Autocomplete

Chỉ mở dropdown khi người dùng đang gõ — không mở khi click hay focus.

Cài đặt

Import

TSX

Cơ bản

Quốc gia

Với icon

Controlled

Đã chọn: —

Loading

Custom empty text

Clear on select

Input tự xoá sau khi chọn — phù hợp với luồng tag picker hoặc search-and-add.

API Reference

Prop	Type	Default	Mô tả
`options`*	`{ label: string; value: string; description?: string }[]`	—	Danh sách lựa chọn
`value`	`string`	—	Giá trị đang chọn (controlled)
`defaultValue`	`string`	—	Giá trị khởi tạo cho uncontrolled usage
`onValueChange`	`(value: string) => void`	—	Callback khi người dùng chọn một option
`label`	`string`	—	Label hiển thị phía trên input
`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ó kết quả khớp
`clearOnSelect`	`boolean`	`false`	Xoá nội dung input ngay sau khi chọn option (hữu ích khi dùng như tag picker hoặc search-and-add)
`clearValue`	`string \| null`	`null`	Giá trị emit qua onValueChange khi người dùng nhấn nút xoá. Mặc định emit chuỗi rỗng ("") để React Hook Form nhận được value hợp lệ
`isLoading`	`boolean`	—	Hiển thị spinner khi đang tải dữ liệu
`className`	`string`	—	Class CSS tuỳ chỉnh cho wrapper