Skip to main content

Search

Search is a specialized text field for entering Search terms.

  • Display prompt text in the Search Field such as “Search.”
  • Include a “Clear” button allowing users to erase the field and begin a new Search.

Rules of Thumb
  • Use prompt text in Search Field.

Appearance and Behavior

Search has two states:

The default state for the Search component.
The default state for the Search component.
Putting focus on the search field adds a pink ring around the field and an ‘X’ for clearing search string.
Putting focus on the search field adds a pink ring around the field and an ‘X’ for clearing search string.

To learn more about adding Help Text or Validation to Input Fields like Search, see the Forms and Validation guidance.

Asset Status
Asset Version Status
Documentation N/A Available
UI Kit - Dark v7 Available
UI Kit - Light v7 Available
UI Kit - Wireframe v7 Available
Web Component v7 Available
Component Tokens v1 In Progress
Status Key
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel