SearchBox

SearchBox là ô nhập chuyên cho tìm kiếm, có icon kính lúp và nút xoá nhanh.

Nút X chỉ xuất hiện khi ô có nội dung; Esc cũng xoá nội dung. Hỗ trợ controlled (value + onValueChange) lẫn uncontrolled (defaultValue). Kế thừa toàn bộ prop của Input (label, hint, appearance, size…).

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 { SearchBox } 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.

6 / 6 trái cây

Xoài cát Hoà LộcTiền Giang
Sầu riêng Ri6Bến Tre
Măng cụtLái Thiêu
Chôm chôm JavaVĩnh Long
Thanh long ruột đỏBình Thuận
Vú sữa Lò RènTiền Giang

Lọc danh sách (controlled)

Kết quả nằm trong khung danh sách có số đếm, tô sáng phần khớp (không dấu: gõ “xoai” vẫn ra “Xoài”) và trạng thái rỗng. onValueChange chạy cả khi bấm X hoặc Esc.

Appearance

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

Kích thước & disabled

small, medium, large — icon đổi cỡ 16 / 20 / 24px.

Cách dùng

Nên

Đặt SearchBox ở vị trí dễ thấy, phía trên nội dung được tìm.
Cập nhật kết quả ngay khi gõ nếu dữ liệu nhỏ; debounce khi gọi API.
Dùng placeholder mô tả phạm vi tìm (“Tìm trong tài liệu”).

Không nên

Không dùng SearchBox cho ô nhập dữ liệu thông thường — dùng Input.
Không xoá nội dung tìm kiếm khi người dùng chuyển trang kết quả.

Props

Prop · Kiểu	Mặc định	Mô tả
value / defaultValuestring	Mặc định: —	Nội dung (controlled / uncontrolled).
onValueChange(value: string) => void	Mặc định: —	Gọi khi gõ, bấm X hoặc nhấn Esc.
onChangeChangeEventHandler	Mặc định: —	Sự kiện gốc (cũng chạy khi xoá).
dismissLabelstring	Mặc định: "Clear search"	aria-label của nút X.
contentBefore / contentAfterReactNode	Mặc định: —	Thay icon kính lúp / thêm nội dung sau nút X.
appearance, size, label, hint, rootClassName…InputProps	Mặc định: —	Kế thừa từ Input.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.searchBox

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
dismissstring aria-label của nút xoá nội dung.	Mặc định (tiếng Anh)`"Clear search"`	messagesVi`"Xoá nội dung tìm kiếm"`
placeholderstring Placeholder mặc định.	Mặc định (tiếng Anh)`"Search"`	messagesVi`"Tìm kiếm"`