SearchInput
atomText field with a leading search icon and an inline results dropdown. Supports label, helper text, and error state. Suitable for filtering, look-ups, and autocomplete flows.
With results
Live filtering — type to see matching results.
Loading state
Shows a spinner while async results are fetched.
Disabled
Non-interactive state.
With label & helper text
Label and helper text provide context for the search field.
Usage
Installation
API Reference
SearchInput props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Controlled search query. |
onChange* | (value: string) => void | — | Called on every keystroke. |
size | "sm" | "md" | "lg" | "md" | Height and font scale — passed through to the underlying Input. |
label | string | — | Label displayed above the search input. |
helperText | string | — | Hint or description below the input. |
errorText | string | — | Error message; triggers the error visual state. |
placeholder | string | — | Hint text when empty. |
results | Array<{ id: number | string; label: string }> | — | Dropdown options to display. |
onResultSelect | (result: { id: number | string; label: string }) => void | — | Called when the user clicks a result. |
isLoading | boolean | false | Shows a spinner in the dropdown. |
disabled | boolean | false | Prevents interaction. |