SearchInput
A clearable search input.Use the <SearchInput /> component when you need to design a search or filtering experience, where the user can specify a word or phrase in order to find relevant matching results.
The <SearchInput /> relies on being controlled with state. You “own” the state, which is managed by providing handlers to the component.
Use the native onChange prop to control the search input's value.
The search input can be cleared by using the onClear prop to pass in a function that clears the state. This function is triggered by clicking on the X-icon, or pressing Escape on keyboard, while the input is focused.
The input supports two sizes, small and medium (default). Prefer using size consistently with other form controls that support the same sizes.
Use the placeholder prop to provide a visual hint or example of what the user can enter.
Use aria-label to provide a label for assistive technologies, or alternatively nest the input in a Field.
Use the disabled prop when the user shouldn't be able to manipulate the value of the input.
Use the invalid prop to communicate that validation has failed for this particular search input.
The <SearchInput /> also supports the following native InputHTMLAttributes (see props for a full list):
- onBlur
- onFocus
- onChange
- placeholder
- value