SearchBox

SearchBox is an input dedicated to search, with a magnifier icon and a quick clear button.

The X button appears only when the box has content; Esc also clears it. Works controlled (value + onValueChange) or uncontrolled (defaultValue). Accepts every Input prop (label, hint, appearance, size…).

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { SearchBox } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

6 / 6 fruits

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

Filter a list (controlled)

Results sit in a list panel with a count, highlighted matches (diacritics are ignored: “xoai” finds “Xoài”) and an empty state. onValueChange also runs when X or Esc clears the box.

Appearance

outline (default), underline, filled-darker, filled-lighter.

Size & disabled

small, medium, large; the icon is 16 / 20 / 24px.

Usage

Place the SearchBox where it's easy to see, above the content it searches.
Update results as people type when the data set is small; debounce API calls.
Use a placeholder that describes the search scope (“Search documents”).

Don't

Don't use SearchBox for regular data entry. Use Input.
Don't clear the search text when people move to another page of results.

Props

Prop · Type	Default	Description
value / defaultValuestring	Default: —	Content (controlled / uncontrolled).
onValueChange(value: string) => void	Default: —	Called on typing, clicking X or pressing Esc.
onChangeChangeEventHandler	Default: —	Native event (also fires when the box is cleared).
dismissLabelstring	Default: "Clear search"	aria-label of the X button.
contentBefore / contentAfterReactNode	Default: —	Replaces the magnifier icon / adds content after the X button.
appearance, size, label, hint, rootClassName…InputProps	Default: —	Inherited from Input.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.searchBox

Key · Type	Default (English)	messagesVi
dismissstring aria-label của nút xoá nội dung.	Default (English)`"Clear search"`	messagesVi`"Xoá nội dung tìm kiếm"`
placeholderstring Placeholder mặc định.	Default (English)`"Search"`	messagesVi`"Tìm kiếm"`