Search

Anatomy

1. Search Icon — Fixed left icon, 16×16 px
2. Input — Free text entry, placeholder hints at the purpose
3. Clear Button — Appears when there is input, clears on click
4. Container — Height varies by size, border-radius configurable

Usage Guidelines

Do ✓

• Use a placeholder that describes what can be searched (e.g. "Search component names")
• Filter in real time (results update 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="Clear"
• Use focus-within to respond to keyboard focus, distinguishing keyboard from mouse