Search

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/search@2.0.0

Usage notes#


The searchy, cleary field.

Variants#


Standard#
Contribution

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Search-input">
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Search-input" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>
Show markup

Quiet#
Contribution

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Search-input">
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossMedium" />
    </svg>
  </button>
</form>

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Search-input" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossMedium" />
    </svg>
  </button>
</form>
Show markup