SearchField

SearchField allows users to search for specific content within the Pinterest app.

also known as Search Box, Search Bar

An example of a default search field.

Usage guidelines

When to use
  • To search through large libraries of information, for example all of Pinterest's pins.
  • Filtering and sorting data. The SearchField can help users quickly find and apply filters or sorting options.
When not to use
  • To search through small libraries of content, for example a list of available languages. Allow the user to scroll through instead.
  • As primary navigation. Users should be able to navigate using alternative methods.
  • As a means of inputting information into a form. Use TextField instead.

Best practices

For general SearchField best practices, refer to the Web Search Field Documentation.

  • Place the search field in a consistent location across all screens and interfaces. This can help users quickly locate the field and reduce confusion.
  • Don't use the search field as a primary navigation tool. It should instead be used to search for specific information. Additionally, don't use both a leading IconButton and a trailing Button. Use one or the other purposefully based on the experience.
  • Use clear labeling with placeholder text that indicates what the user can search for. For example, "Search products", Search Users," etc. Users should know the basic bounds of their search before interacting with the field.
  • Provide clear feedback to the user when they begin a search — loading icon, skeleton loader, etc. This helps the user understand that their search request is being processed.
  • Include a "clear" icon within the field when the user has entered text. This allows users to quickly clear the form without having to delete each character.

Accessibility

People use Android's accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessible design on Android


Accessible development on Android
; Opens a new tab

Labels

Be sure that a unique label is associated with the correct field. The SearchField should also have clear, descriptive placeholder text.

Validation

Feedback should be provided to describe a successful search, one that's still loading or if an error has occurred. This message should be associated with the SearchField so that it is recognized by screen readers.

Design tokens

Anatomy

1 Container | 2 Content | 3 Label | 4 Helper text | 5 Leading icon | 6 Trailing icon

Variants

Default

The default search field is meant to handle the bulk of search tasks. It includes a few required items and several optional elements. The required elements are the container, the text, the indicator and the search icon. Optional elements include label text, helper text and the trailing icon.

An example of a default search field.

Text entered

When text is entered into a search field, the entered text color will change to default and the indicator will trail the text. The trailing icon will always be a “clear” icon - allowing the user to clear their entered text.

An example of a search field with text entered and a clear icon.

Leading IconButton

The SearchField can include an IconButton leading before the field. This icon button serves to move the user back to the original search screen.

An example of a search field with a leading icon button allowing the user to move backwards.

Trailing Button

The SearchField can include an Button trailing after the field. This button serves to cancel the search and bring the user back to their previous experience.

An example of a search field with a trailing button, allowing the user to cancel the search.

Writing

For writing best practices, refer to the Content standards

.

  • Don't truncate label text. If the text is too long for one line, it should be reduced.
  • Use clear labeling with placeholder text that indicates what the user can search for. For example, “Search products”, Search Users,” etc.
  • Use consistent language/naming for the SearchField and it’s labels across screens.
  • Provide clear and concise error messages that are easy to understand and provide guidance on how to correct the search query or find alternative content.
  • If needed, provide helper text to clarify the SearchFields purpose. Especially when users could be unfamiliar with the app or it’s search functionality.