Search field
The search field filters a list using custom characters and keywords.
- Search icon
- Placeholder text
- Field container
- Trailing accessory
- Input text
- Clear button
Size
Search fields are available in small, medium, and large sizes. The default size is small and the tap target is 48px across all sizes.
Placeholder text
The placeholder text clarifies what content is filtered when searching.
Input text
The input text contains the characters used to filter a list. Ideally, the list is filtered in real time as each character is typed.
Trailing accessories
The trailing accessory is optional and provides alternative methods to enter text. The default accessory is a microphone button.
The trailing accessory is replaced with a clear button by default when the field is focused and receives one or more characters.
Static search icon
The lead search icon is static and acts as an indicator and affordance of the field’s purpose in place of a label.
Overflow
Input text overflows horizontally and is masked between the lead and trailing accessories. The cursor remains visible while the field is focused and the input text will adjust in alignment to keep the cursor in view. The input text aligns to the start when the field loses focus.
Focus state
Focusing on the search field places the text cursor at the leading edge of the placeholder text. The placeholder text and trailing accessories by default are replaced with a clear button when one or more characters are entered.
Refocusing on the field places the typing indicator at the end of the input value.
Cancel button
Place a cancel or back button near the search field in search views or similar contexts where users need a clear option to exit the view. This is essential in native search interfaces to provide a straightforward way for users to navigate away from the search.
Search button
Include a search button after the search field when a server request and page refresh are necessary. This approach is particularly useful for large datasets in tables, where real-time searching can slow down performance and degrade the user experience.
Width
Search fields have a maximum width of 480px and a minimum width of 200px.
Small screens
Search fields span the full width of the container on smaller screens. The search field should be near the top of the page to ensure there’s enough room for the device keyboard and the first few results to be visible. The screen will scroll to keep the search field in view when receiving focus.
Native
Where possible, native platforms use real-time filtering as characters are entered. Native platforms can also leverage a focused search view to reduce unnecessary UI as a search query is entered.
Web
Search fields on web platforms filter the list below the field.
Medium and large screens
Medium and large screens across platforms can use the search field inline with other elements, like filter buttons in an action bar.
Search icon visibility
Do keep the lead search icon accessory.
Don’t hide the lead search icon accessory, even when text is entered.
Search field height
Do use a size that matches adjacent inline elements.
Don’t use a search field that’s a smaller or larger than adjacent inline elements.
