Search

A search field is a text input enhanced for finding results. It can be used alone or with a typeahead menu of list items. 

On this page

Best Practices

Use Search
  • To allow users to quickly locate content or specific information that is not immediately visible
  • To help users discover related or relevant content they may not know exists
  • When there could be multiple results from different sources
Don't Use Search
  • When there is small or limited amount of data, or if the content can be navigated easily through filtering or categorization (See filters)
  • For information that can be found easily within one view

Recommendations

Placeholder

The search field has placeholder text when empty and unfocused. The placeholder text disappears as the user begins typing into the field.

Do this

Make the placeholder specific. Give the user a hint about the content they’re searching and/or what parameters they can use to search.

Don’t do this

Add critical information to the placeholder. The placeholder text disappears once the user begins entering data and will therefore be unavailable.

Headings and Hint Text

Ensure you use a descriptive label or commonly recognized label for Heading and Hint Text so users can anticipate what types of results will be included.

Do this
Find products by name, category, or brand
Don’t do this
Item

Indicators

Show loading indicators or success/error messages to communicate the status of the search. Use simple, concise messages that help users understand what went wrong or how to proceed.

Do this
Invalid term, please avoid special characters.
Don’t do this

Localization

For RTL (right-to-left) markets, the layout of the search component is mirrored. The order of the min and max values are in reverse, placing the largest value on the left, and the smallest value on the right.

If you would like to read more about localization, please see reference tables in internationalization documentation.

Responsive

All pages must be responsive and reflow to a minimum of 320px. Search will reflow to a minimum of 300px, to allow for margins and grid gutters. Reflow accessibility standard

example showing minimum width of search component at 320px

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.