• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/search@3.0.3-alpha.1
View repository
GitHub
View package
npm

Usage notes

The searchy, cleary field.

Variants

Standard
Contribution

Show markup
<form class="spectrum-Search">
  <div class="spectrum-Textfield">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Magnify" />
    </svg>
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-Search-input" autocomplete="off">
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Cross75" />
    </svg>
  </button>
</form>

<form class="spectrum-Search is-disabled">
  <div class="spectrum-Textfield is-disabled">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Magnify" />
    </svg>
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-Search-input" autocomplete="off" disabled>
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Cross75" />
    </svg>
  </button>
</form>

Quiet
Contribution

Show markup
<form class="spectrum-Search spectrum-Search--quiet">
  <div class="spectrum-Textfield spectrum-Textfield--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Magnify" />
    </svg>
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-Search-input" autocomplete="off">
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Cross100" />
    </svg>
  </button>
</form>

<form class="spectrum-Search spectrum-Search--quiet is-disabled">
  <div class="spectrum-Textfield spectrum-Textfield--quiet is-disabled">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-icon-18-Magnify" />
    </svg>
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-Search-input" autocomplete="off" disabled>
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Cross100" />
    </svg>
  </button>
</form>

Migration Guide

New Textfield markup

Search now uses the new Textfield markup. See the Textfield migration guide for more information.

Quiet Search requires .spectrum-Search--quiet

You now must add .spectrum-Search--quiet for Quiet Search.

.spectrum-Search-icon is no longer required

You can omit the .spectrum-Search-icon class.

.spectrum-Search-clearButton must be added to .spectrum-ClearButton

The .spectrum-Search-clearButton class is now required on the .spectrum-ClearButton.

No results found

Try another search term.