Search Field

Done

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.

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.

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.

Surface/container
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

Small Search

The small search is used for areas where a smaller footprint is needed for searching. The most common use case is in the table header when expanding the search via QAB trigger. Note: Height of the search bar is 40px.

Surface/container
Leading icon - Small avatar
Input value — Body 1
Clear trailing icon - Quick action button
Cancel search affordance — Compact button (optional for persistent search fields)
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.

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

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

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
Expand	1a. Quick Action Button fade out	∆motionTimeNano	∆motionTimingFunctionStandard	QAB fades out
	1b. Container resize	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Search field container expands to full width
	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
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%
	2a. Container resize	∆motionTimeExtraFast	∆motionTimingFunctionStandard	Text field container resizes into quick action button
	2b. Quick Action Button fade in	∆motionTimeNano	∆motionTimingFunctionStandard	QAB fades in

‍

Developer Docs

Vue Developer Docs

Component documentation coming soon!