Search field
v2.1
The search field filters a list using custom characters and keywords.
The search field filters a list using custom characters and keywords.
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.
Medium and large screens across platforms can use the search field inline with other elements, like filter buttons in an action bar.
Search fields are available in small, medium, and large sizes. The default size is small and the tap target is 48px across all sizes.
The placeholder text clarifies what content is filtered when searching.
The input text contains the characters used to filter a list. Ideally, the list is filtered in real time as each character is typed.
The trailing accessory is optional and provides alternative methods to enter text. The default accessory is a camera button.
The trailing accessory is replaced with a clear button by default when the field is focused and receives one or more characters.
The lead search icon is static and acts as an indicator and affordance of the field’s purpose in place of a label.
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.
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.
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.
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.
Search fields have a maximum width of 480px and a minimum width of 200px.
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.
Search fields on web platforms filter the list below the field.
Do keep the lead search icon accessory.
Don’t hide the lead search icon accessory, even when text is entered.
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.
