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

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. 

  1. Surface/container
  2. Leading icon
  3. Input value — Body 1
  4. Clear trailing icon - Quick action button
  5. Cancel search affordance — Compact button (optional for persistent search fields)
  6. Focus/activated indicator

Specs

Color

There are only a few unique colors with the search field component. See the quick action button and text field components for other detailed color and elevation specs.

Element Property Value
Leading icon Color ∆colorPlatformGray600
Placeholder text Text color ∆colorPlatformGray600
Input value Text color ∆colorPlatformGray900
Clear quick action button Avatar/icon color ∆colorPlatformGray600

Spacing


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 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. 

Focus


Expand and collapse

Expand

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.

Interaction Steps Duration Easing Notes Haptics
Focus 1a. Focus state fades in ∆motionTimeFast ∆motionTimingFunctionStandard Opacity fades from 0-100%.  
  1b. Placeholder fades out ∆motionTimeFast ∆motionTimingFunctionStandard Opacity fades from 100-0%.  
Interaction Steps Duration Easing Notes Haptics
Expand 1. Container resize ∆motionTimeExtraFast ∆motionTimingFunctionStandard Quick action button container resizes into textfield container.  
  2a. Focus state fade in ∆motionTimeNano ∆motionTimingFunctionStandard Opacity fades from 0-100%.  
  2b. Compact button fade in ∆motionTimeNano ∆motionTimingFunctionStandard Opacity fades from 0-100%.  


Collapse

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. 

Interaction Steps Duration Easing Notes Haptics
Collapse 1a. Compact button fades out ∆motionTimeNano ∆motionTimingFunctionStandard Opacity fades from 100-0%.  
  1b. Focus state fades out ∆motionTimeNano ∆motionTimingFunctionStandard Opacity fades from 100-0%.  
  2. Container resize ∆motionTimeExtraFast ∆motionTimingFunctionStandard Text field container resizes into quick action button.  


Developer Docs

Vue Developer Docs

Component documentation coming soon!