• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/search@5.0.21
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 spectrum-Search-textfield">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon spectrum-Search-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-ClearButton--sizeM spectrum-Search-clearButton">
    <div class="spectrum-ClearButton-fill">
      <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </div>
  </button>
</form>

<form class="spectrum-Search is-disabled">
  <div class="spectrum-Textfield spectrum-Search-textfield is-disabled">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon spectrum-Search-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-ClearButton--sizeM spectrum-Search-clearButton" disabled>
    <div class="spectrum-ClearButton-fill">
      <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </div>
  </button>
</form>

Quiet
Contribution

Show markup
<form class="spectrum-Search spectrum-Search--quiet">
  <div class="spectrum-Textfield spectrum-Search-textfield spectrum-Textfield--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon spectrum-Search-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-ClearButton--sizeM spectrum-Search-clearButton">
    <div class="spectrum-ClearButton-fill">
      <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </div>
  </button>
</form>

<form class="spectrum-Search spectrum-Search--quiet is-disabled">
  <div class="spectrum-Textfield spectrum-Search-textfield spectrum-Textfield--quiet is-disabled">
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon spectrum-Search-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-ClearButton--sizeM spectrum-Search-clearButton" disabled>
    <div class="spectrum-ClearButton-fill">
      <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100 focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Cross100" />
      </svg>
    </div>
  </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 required again

You need to add the .spectrum-Search-icon class for Express support. This was previously not required, but has been added back to support the Express design.

New ClearButton markup

See the ClearButton migration guide for more information.

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

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

.spectrum-Search-textfield must be added to .spectrum-Textfield

The .spectrum-Search-textfield class is now required on the .spectrum-Textfield.