SearchBar
The SearchBar component combines Payload's search icon, control spacing, and debounced SearchFilter. Use it when filtering a custom list or data view.
Import
Interactive usage
Use label to provide both the visible placeholder and the input's accessible name. onSearchChange receives the value after the SearchFilter debounce.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Receives the debounced search value. |
| | | Sets the placeholder and accessible label. |
| | — | Synchronizes the input with an external value. |
| | — | Adds controls to the end of the search bar. |
| | — | Adds a class to the search bar wrapper. |
* An asterisk denotes that a prop is required.
Using SearchFilter directly
SearchFilter is the lower-level debounced input used by SearchBar. Its input intentionally has no padding because the surrounding control owns its spacing and icon. Use it directly only when composing your own search surface.
The legacy fieldName, initialParams, setValue, and value props are deprecated.
Was this page helpful?