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)}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { FilterSearch } from "@/components/beste/component/filter-search";
<FilterSearch
label="Search"
placeholder="Search products"
className="w-64"
/>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 | — |
Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.
Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.
Dropdown with checkbox rows and a selection-count badge. Keeps many-option filters compact in toolbars where a checkbox list would not fit.
Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.