Example: store header — search with suggestions
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 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)
role="search" or aria-label to describe the search purposearia-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