Search field

v2.1

The search field filters a list using custom characters and keywords.

CSS
Marko
React

Anatomy

Search icon
Placeholder text
Field container
Trailing accessory
Input text
Clear button

Options

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

The trailing accessory is replaced with a clear button by default when the field is focused and receives one or more characters.

Behavior

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.

Screen size

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.