Search Bar
A search bar allows users to search a large set of data by entering keywords. A list of matching items is then returned.
Props
Name | Type | Default | Description |
---|---|---|---|
id required | string | The unique identifier of the SearchBar | |
onSearch required | (filterText: string) => void | A callback function executed when a search is performed by either pressing Enter or clicking on the icon.
| |
containerClassNames | IClassName | Additional CSS classes to set on the outermost element | |
disabled | boolean | false | Whether the SearchBar is disabled. If disabled, it cannot be interracted with |
disabledOnMount | boolean | false | If true, the search bar will be disabled in the UI and in the state on mount. |
inputClassNames | IClassName | Additional CSS classes to set on the inner input element | |
maxWidth | string | "500px" | The maximum width of the SearchBar |
minWidth | string | "500px" | The minimum width of the SearchBar |
onChange | (event: ChangeEvent<HTMLInputElement>) => void | A callback function executed when the text in the SearchBar changes
| |
onMount | () => void | A callback function executed when the component is mounted to the DOM | |
onUnmount | () => void | A callback function executed when the component is unmounted from the DOM | |
placeholder | string | The text displayed inside the search bar when it is empty | |
searching | boolean | false | Whether a search is being performed. If true, a loading icon appears to indicate something is happening. |
value | string | "" | The value of the search bar. In other words, this is the text currently enterred in the SearchBar. |
No guidelines exist for SearchBar yet.