SearchInput
A search field with an icon, a clear button, and a shortcut hint.
Loading, disabled, and read-only
The spinner replaces the search icon. Disabled and read-only fields cannot clear.
Sizes
Match the size of the buttons beside the field, and use lg only for a hero search bar. The sizes match the other fields.
Filter events
Use onValueChange for text changes and clear actions.
Appearances
Use inset in forms, line for inline filters, pill for a round search bar above a list, and floating, which is liquid glass, over images or content.
States
Inset and line show the same states as the other fields. Hover and focus the fields to see those states.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Give the field a visible label or an
aria-label. A placeholder is not a label. - The shortcut hint is only a hint. Register the shortcut yourself.
API
SearchInput accepts Input props except render. Its ref points to the input. className styles the outer field.
SearchInput
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | Sets the height to 26, 36, or 44 pixels. |
| appearance | 'inset' | 'line' | 'pill' | 'floating' | 'inset' | Sets the field shape. Use inset in forms, line for light or inline filters, pill for a search bar that stands alone above a list, and floating for a search bar over images or content. |
| value / defaultValue | string | – | Sets controlled text or initial uncontrolled text. |
| onValueChange | (value: string) => void | – | Receives the text after typing or clearing. |
| loading | boolean | false | Shows Spinner in place of the search icon. |
| loadingLabel / clearLabel | string | 'Searching' / 'Clear search' | Sets the accessible status and button labels. |
| shortcut | readonly string[] | – | Shows Kbd.Shortcut while the input is empty and unfocused. |
| inputClassName | string | – | Adds classes to the input element. |