Overview
A search field is a text field that accepts user input to quickly find content within an application. It has placeholder content, a Search and Clear buttons. The Search in the Tool Header takes the central part of the header.
When to Use
Recommended
- Use the Tool Header Search only within the Tool Header
- Use the Tool Header Search when you need a search functionality in your application.
Not Recommended
- Avoid using semantic states.
- Avoid using the Tool Header Search outside the Tool Header.
- Avoid altering the interaction states or altering the buttons inside the search field.
Anatomy
Placeholder text
The placeholder, or input prompt, is a short hint (a word or short phrase) to help the user with data entry. The placeholder text gets replaced by the user input.
Typed text
Tyoed text represents the entered search phrases or keystrokes. It replaces the placeholder text and remains after the search is executed.
Decorative Icon
The decorative icon (chevron right) hints the user about placing the "Search" button. It also helps to increase readability and perception of the search field.
Clear button
This button appears when there is something typed in the search field. It is displayed as a standard nested button and clicking on it clears the user input.
Search button
Appears when something is typed in the field and gets the keyboard focus to hint that this will be executed action when Enter/Return key is pressed. The search button is always paired with a clear button.
Responsiveness
Although the search field looks and behaves equally on different screen sizes and device types, when placed inside a Tool Header, it inherits the responsive behavior of the Tool Header.
On screens smaller than 600px, the Search Field transforms into a Tool Header button. When the button is clicked, it expands, and the search field gets the focus.
Tool Header Search - Responsiveness
See also:
Resources
Design
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.