Forms

SearchInput

An input with a search icon and a clear affordance, for filtering a list.

Importimport { SearchInput } from "@/components/ui/SearchInput";
Sourcesrc/components/ui/SearchInput

For filtering something already on screen. Note that it reports changes through onValueChange with the string itself — onChange is deliberately omitted from the type, so a handler expecting an event will not compile.

Default

query:

Small

small is for panel headers and dense toolbars, where the default height would crowd the row.

query:

Props

SearchInput

PropTypeDefaultDescription
onValueChange(value: string) => voidCalled with the new string. `onChange` is omitted from the type.
size"default" | "small""default"`small` for panel headers and dense toolbars.
wrapperClassNamestringClasses for the shell rather than the `input`.