Anatomy
To make sure Search is more clearly identifiable, the props are by default are visible but can be hidden
- iconLeft: Visual aide to make Search more obvious.
- Text: Displays the keyword entry. Placeholder text is always displayed.
- Badge (optional): Hot key badge that displays keyboard shortcut.
Sizes
A Search can be made smaller or larger depending on the context it's being used in and alignment with additional components such as Button. More general information on form best practice can be read on the Forms page.
States
Focused
Upon clicking a Search, the onFocus state is displayed by default and any placeholder text is removed.
Entered
When keywords have been input, the text colour darkens and a dismissable icon button become active.
Error
An error message can be specified if necessary.
Disabled
A disabled state is displayed when the search is not available, but is needed to tell the user it may become available later and to maintain layout continuity.
ReadOnly
A read-only Search cannot be modified. However, a user can tab to it and highlight it.
Loading
When performing a search, a loading indicator replaces the persistant search icon. During this time the text input can not be removed so the remove icon is not shown.
Usage
|
Text overflow
When the entered text is too long for the available horizontal space in the field, the text is not truncated, but scrollable within the input.
|
|---|
Contextual widths
We define a minWidth of Search to 160px, but no max-width as this should be determined by the content that can be searched for and shown in our DropdownMenu.
Nested search
Search is available as a prop in all variations of the DropdownMenu component. When nested, certain container tokens such as radii override Search's default tokens.
Best practice
- Place Search above the content the user will be searching.
- Make the placeholder specific. Give the user a hint about the content they're searching and/or what parameters they can use to search.
- Make sure Search is displayed wide enough to completely display common search terms.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Show a "No results" state instead of an errorMessage |
🚫 Hide Search behind an IconButton if there is enough space for the full component. |
|
✅ Always include placeholder text in Search. This will offer guidance to the user about what to search for. |
🚫 Add critical information to the placeholder. The placeholder text disappears once the user begins entering data and will therefore be unavailable. |
|
|
🚫 Truncate or wrap text within Search. |
Also see