Search Input

Default (40px height)

<div class="elv-search-input">
  <span class="material-symbols-outlined elv-search-input__icon">search</span>
  <input
    type="search"
    class="elv-search-input__field"
    placeholder="Search software..."
    aria-label="Search"
  />
  <button class="elv-search-input__clear material-symbols-outlined" aria-label="Clear">
    close
  </button>
</div>

Large (48px height)

<div class="elv-search-input elv-search-input--lg">
  <!-- Same structure as default -->
</div>

Focus State

With Value (Clear Button Shows)

<!-- Add elv-search-input--has-value class to show clear button -->
<div class="elv-search-input elv-search-input--has-value">
  <!-- Clear button is visible -->
</div>

Disabled State

<input class="elv-search-input__field" disabled />

Accessibility Notes

• ARIA Labels: Always include aria-label="Search" on the input
• Clear Button: Include aria-label="Clear search"
• Focus State: 3px light purple outline (#c3bde5) with 1px offset — CRITICAL for accessibility
• Keyboard: Enter to submit, Esc to clear
• Type: Use type="search" for semantic HTML

Design System Specs (DESIGN.md)