Search Field

Planned

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.

Search Field

Anatomy

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.  

  1. Quick action button surface
  2. Quick action button icon

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.

  1. Input field surface
  2. Leading icon
  3. Input value — Subtitle 1
  4. Trailing icon (clear affordance)
  5. Cancel search affordance — Compact button (optional for persistent search fields)
  6. Focus/activated indicator

Specs

No unique colors or elevation are utilized with the search field component. See the quick action button and text field components for detailed color and elevation specs.

Spacing

All other text fields morph the input placeholder into the input label (when transitioning from empty to filled — but once filled the value is always shown), but the search field doesn’t do this in an effort to reduce redundancy. Instead the placeholder is hidden on focus and only the input value is shown. 


States

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.


Theming

No unique theming considerations outside what is already built-in with the quick action button and standard text field.

Placement

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.

Behavior

All other text fields morph the input placeholder into the input label (when transitioning from empty to filled — but once filled the value is always shown), but the search field doesn’t do this in an effort to reduce redundancy. Instead the placeholder is hidden on focus and only the input value is shown. 


[motion graphic showing the transition between an empty state and filled state]


[motion graphic showing the search field appearing after pressing the quick action button trigger]


Developer Docs

Vue Developer Docs

Component documentation coming soon!