Search Input
A text input with a search icon and clearable value, designed for filtering and search interactions.
Default
Custom Placeholder
Disabled
Usage
Use SearchInput for client-side filtering, such as sidebar navigation, data tables, or command palettes.
The clear button appears automatically when the input has a value. Clicking it clears the value and refocuses the input.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Controlled input value |
| onValueChange | (value: string) => void | — | Callback when value changes |
| placeholder | string | — | Placeholder text |
| wrapperClassName | string | — | Class name for the outer wrapper div |
| disabled | boolean | false | Disables the input |