SEARCH

When to Use

Example: store header — search with suggestions

  • Adding a dedicated search input for filtering or finding content within a page or dataset
  • Global search bars in headers, command palettes, or data tables
  • Use TextField instead for general text input; Search is specifically styled with a search icon and clear button
  • Pair with a results dropdown or filter panel for the best user experience

Usage Guidelines

DO

Use a placeholder that describes what can be searched. Filter in real time as the user types. Show the full list or recommended content when the search is empty

Don’t

Don't use Search for structured inputs like passwords or emails — use TextField instead. Don't add an additional label inside Search (the icon already provides the semantic context)

Accessibility

  • Use role="search" or aria-label to describe the search purpose
  • Clear button needs aria-label (e.g. localized “Clear”); it appears when the field has a value and is focus-within (matches Figma); use showClearOn="always" if you need the legacy behavior
  • Focus-visible is expressed with a 2 px border (default or brand), not an offset ring