The search field is a special input field that provides a way to users to search within the current experience, the results of which are shown in a different area within view. Search fields can be initially hidden, or persistently displayed.
The essential parts of the search field are the trigger and the text field. Every search begins with pressing a trigger, which can be the quick action button or the search text field itself. If the search functionality is secondary to the primary purpose of the experience, the trigger should be deemphasized and not demand too much attention.
- Quick action button - Small
When the quick action button trigger is used to display the text field, a cancel button should also be displayed — allowing the search field to be hidden again. The cancel button is the only way to close out the expanded search field.
- Leading icon - Small Avatar
- Input value — Body 1
- Clear trailing icon - Small Quick action button
- Cancel search affordance — Compact button (optional for persistent search fields)
- Focus/activated indicator
All states for the quick action button, text field, and compact button are documented in those component docs. The graphics shown below outline the states for the quick action button trigger (the progression from the search field being hidden until a quick action button is pressed, and then shown with a cancel compact button) and the persistent search experience.
No unique theming considerations outside what is already built-in with the quick action button and standard text field.
Search fields can be placed inline anywhere a search is needed, or display persistently at the top of the screen. When displayed persistently, clicking the cancel button will cancel the search and return the UI to the state previously without hiding the search field.
All other text fields have an input label but once filled the input label is still shown. The search field doesn’t do this in an effort to reduce redundancy. Instead the input label placeholder is hidden on focus and only the input value is shown.
Expand and collapse
When the trigger is tapped or clicked, the search text field will expand to full size. Once expanded, it will automatically be put in focus mode by fading from 0% to 100% opacity. The compact button also fades from 0% to 100% opacity.
When the cancel compact button is tapped or clicked, the compact button will fade from 100-0% and the search text field will collapse back to the trigger.
Developer DocsVue Developer Docs
Component documentation coming soon!