Search field

Version 2.0.0

A search field is used for searching and filtering items.

Example of two search fields. First search field in default state, label Search. Second search field with user input term, text Flights to Hawaii.
DateVersionSpectrumExpress UI KitMar 17, 20232.0.0DownloadDownload

Anatomy#

Image illustrating through labels the component parts of a search field, including its field, label when no search term has been input or a search term when input, and in-field button.

Options#

Key example of the default state of a search field, including label Search and search icon inside the field.

Label and icon#

A search field should include a label and a search icon. In the default state before a search term is input, the label is in regular body text style to meet contrast ratios and to show that this is a field label, not placeholder text. Search fields should also include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).

Key example of a search field showing user entered text, Flights of Hawaii. An in-field button is available to clear the search term.

Value#

The value shows a user’s entered text in regular body text style.

Key example showing two search fields, both in default state. The width of the second search field is wider than the first.

Width#

The width of a search field can be customized appropriately for its context.

A search field in the default state, with a label Search and a search icon, in four sizes: small, medium, large, and extra-large.

Size#

Search fields come in four different sizes for mobile and desktop platform scales: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Key example of search fields in not quiet and quiet options. The not quiet search field has a visible border and background. The quiet search field has no visible background and an underline beneath the text input part of the field.

Quiet#

By default, search fields have a visible background. Search fields often have high visibility in a hierarchy of actions, so the non-quiet search field is standard.

A quiet search field can be used when searching isn’t a high priority action on the page. These search fields have no visible background, and this style works best when a clear layout makes the field easy to recognize. Too many quiet components in a small space can be hard to read.

Key example of a search field in a disabled state. The background, search icon, and label are gray, with no visible border.

Disabled#

A search field in a disabled state shows that a search option exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that it may become available later.

An example of a search field showing help text, Search within names, descriptions, or attributes.

Help text (description)#

A search field can have help text below the field to give extra context or instruction about what a user should input. The description communicates a hint or helpful information, such as a search’s scope.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Valuelabeltext / nothingtextvaluetext / nothing–widthnumber–sizesmall / medium / large / extra-largemediumis quietyes / nonois disabledyes / nonodescriptiontext / nothingnothing

Behaviors#

Key example showing minimum width behavior for a search field. Two search fields at their minimum widths, 3x the height of the field. First search field shows the entire label, label Search. Second search field has the user input search term Flight truncated mid-word, showing only the first four letters and an ellipsis at the end.

Minimum width#

The minimum width for a search field is 3× the height of the field, for both standard and quiet style. This minimum width guarantees that small search fields are readable and easy to target on touch devices.

Key example showing the overflow behavior for search field. The user input text Flights to Hawaii is truncated after the first three letters in the word Hawaii, with an ellipsis at the end.

Text overflow#

When the entered text is too long for the available horizontal space in the field, the text truncates.

Key example of a search field with help text that has wrapped to a second line. Label, Search audiences. Help text, Search within names, descriptions, or attributes. “or attributes” is on the second line.

Help text overflow#

When the help text is too long for the available horizontal space, it wraps to form another line.

Key example of two search fields shown in their keyboard focus states, the first showing standard style and the second in quiet style.

Keyboard focus#

A search field can be navigated using a keyboard. The keyboard focus state takes the field’s visual hover state and adds a blue ring to the field in focus.

Key example showing three text fields in different phases of a search flow. First, a default search field with no user input search term. Second, a search field in focus state and with in progress input search term Flights, with an in-field clear button. Third, a search field in the final state of a search action, showing the input term Flights to Hawaii and an in-field clear button.

In-field button#

The in-field button offers an option to clear any input search term.

If search results are being shown in a menu or popover, selecting this button will close the menu and clear the field. If a search term has been entered and the results have appeared, selecting this will only clear the field and not affect the list of results.

Key example of two search fields in Windows high contrast black theme, one in default state and one in disabled state.

Windows high contrast mode#

In Windows high contrast mode, a search field should be displayed using the high contrast theme-specified colors for buttons. By default, the border color should be the same as the button text color and labels should use default text color. In hover and keyboard focus states, the border color should display as the button border color. In the disabled state, border and text color should display as the disabled color.

Search field (Windows high contrast mode) UI kit

Usage guidelines#

Show a "No results" state instead of an error#

Search fields do not have an error state. Search functionality should anticipate spelling mistakes in search queries, and accommodate multiple spellings of words in search results — not treating any search term as an error.

Instead of showing an error, show a “No results” page or a section with any suggestions for how to get results to appear.

do
Example of the correct way to show no results for a search query. A search field with user input text Flights to Hawaii shows a no results state with the explanation, No results. Adjust any search filters and try again.
dont
Example of the incorrect way to show no results for a search query. A search field with input user text Flights to Hawaii shows an error icon within the field.

Searching vs. filtering#

In a searching scenario, a user inputs a search term for a specific thing they’re looking for. In a filtering scenario, a user generally knows what they’re looking for, but may not have a specific thing in mind.

The search field can be used for both of these contexts. For a search experience, use the search field as-is. For a filtering experience, add a filter icon next to the search field, where a user can narrow down their search results before (or instead of) searching using a specific term. Filters can appear below the search field as tags.

do
Examples of the correct way to design using a search field for both searching and filtering interactions. For searching, use a search field. For filtering, use a search field paired with a filter icon and tags that show filters that can be applied. Pre-set filters in this example are Flight, Hawaii, and Travel.

Searching within a category#

Create a scoped search by pairing a search field with a picker component. Add a picker (either quiet or standard style) where a user can select a topic or category that they would like to search within. It’s helpful to also update the search field label to communicate what the user is searching within.

Spectrum previously had a specific “search within” component that would allow a user to filter down a search field category before searching for a particular term. It was deprecated because it did not meet accessibility and localization requirements.

do
Example of the correct way to design a scoped search functionality by pairing a picker with a search field. Selected picker option, Travel. Search field label, Search travel.

Include a label#

Any search field should include a label inside the field, in the default state. The default label text is Search, but this can be customized to be more specific for use cases like scoped search, wayfinding, or building context — acting like a prompt for a user to search more specifically (e.g., Search templates).

Keep in mind that once a search term is entered the label text is no longer viewable. Use help text to show search formatting examples or give hints about what to input. It can be distracting or redundant if the search field label and its help text are both communicating the same thing, so write these thoughtfully.

do
Key example showing the correct usage of including a label with a search field. Label text, Search.
dont
Key example showing two incorrect usages of labels in search fields. First example, a search field with no label. Second example, a search field’s label, Search, is shown in light gray italicized text, styled as placeholder text instead of label text.

Follow capitalization rules#

The label within the search field should be in sentence case, following Spectrum’s UX writing standards for capitalization.

do
Key example showing the correct usage of sentence case capitalization in a search field label. Only the first letter S in the label Search photos and videos is capitalized.
dont
Key example showing the incorrect usage of capitalization for a search field’s label. A search field label of "Search Photos and Videos" is using title casing, where the S, P, and V are capitalized.

Internationalization#

Key example featuring a search field used for UI for a right-to-left language. A search field shows a user input search term in Arabic that translates in English to “Flights to Hawaii.” The in-field button is at the end, and the search icon is at the start. The search icon itself is not mirrored.

RTL#

For RTL (right-to-left) languages, the layout of the search field is mirrored. The icon and label are right-aligned and the in-field button is left-aligned. Make sure to consider that some types of content (e.g., email addresses) are not translated.

The magnifying glass icon itself is not mirrored. The handle remains on the right side because it represents holding the object, and the majority of people around the world are right-handed.

Keyboard interactions#

KeyInteractionTabTabbing into a search field removes the "Search" label if empty, or selects the existing text. Tabbing while in a search field moves focus to the next item on the page. Shift + TabMoves focus to the previous item on the page. Enter or ReturnSelecting Enter or Return while a search field is in focus and filled out will perform the search.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of a search field in the Spectrum for Adobe Express theme. Search field with default label text, Search.

Spectrum for Adobe Express#

Search fields in Spectrum for Adobe Express are fully rounded and have a thicker border.

Changelog#

DateNumberNotesMar 17, 20232.0.0
  • This component was added to the website.
  • Added additional options, behaviors, usage guidelines, internationalization guidelines, keyboard interactions, and theming.
  • Icon changed from UI icon to workflow icon.
  • Updated colors to 6.0.0.
  • Changed placeholder text to function as a label in body text style.

Design checklist#

check

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

check

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

check

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

unchecked

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

check

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

check

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

check

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

check

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

N/A

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

check

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

unchecked

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.