Usage guidelines
- 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.
- 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 Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Accessible design on iOS
Accessible development on iOS
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.
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.
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.
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.
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.