The SearchInput is used to run and execute search queries within a given element (for example the Project Switcher).
Results can be returned via a list. The x-mark icon resets the search query.
Placeholder text can be customized to guide the user as to the type of searches they can perform or terms they can use.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, color, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | focus | disabled | rest |
Behavior
An x-mark icon appears when the user has typed into the field, allowing them to clear their entered text in one go. Depending on its use case (for example, the Space Switcher), the field can be automatically active, allowing the user to type into the text field instantly.
When no result is found that matches the search term, a feedback message is displayed to the user.
Component dependencies
This component is internally dependent on the following components:
Help and support