Text search input with a leading icon for keyword filtering. Debounce in the consumer if you fetch on change.
The import and the props worth knowing about, in one place.
import { FilterSearch } from "@/components/beste/component/filter-search";
<FilterSearch
label="Search"
placeholder="Search products"
onChange={(value) => console.log("query:", value)}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Optional group heading rendered above the input |
placeholder | string | — | |
value | string | — | Controlled text; omit to let the component manage its own state |
defaultValue | string | — | Initial text when uncontrolled |
onChange | (value: string) => void | — | |
className | string | — |