• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Contribution
Current version@spectrum-css/search@7.1.4
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/search@8.0.0-s2-foundations.15
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

This component contains a single input field with both a magnifying glass icon and a clear (“reset”) button displayed within it. When making use of this component, the clear button should only be displayed when the input has a value.

Variants

Standard
Contribution

Default

Disabled

Show markup
<div class="spectrum-Examples" style="justify-content: space-evenly;">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <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>
  </div>
</div>

Quiet
Contribution

Default

Disabled

Show markup
<div class="spectrum-Examples" style="justify-content: space-evenly;">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <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>
  </div>
</div>

With Help Text
Contribution

Standard

Example help text. Lorem ipsum dolor sit amet.

Quiet

Example help text. Lorem ipsum dolor sit amet.
Show markup
<div class="spectrum-Examples" style="justify-content: space-evenly;">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Standard</h4>

    <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>
      <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
        <div id="helptext-1" class="spectrum-HelpText-text">Example help text. Lorem ipsum dolor sit amet.</div>
      </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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Quiet</h4>

    <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>
      <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
        <div id="helptext-2" class="spectrum-HelpText-text">Example help text. Lorem ipsum dolor sit amet.</div>
      </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>
  </div>
</div>

Standard Sizes
Contribution

Small

Example help text. Lorem ipsum dolor sit amet.

Medium

Example help text. Lorem ipsum dolor sit amet.

Large

Example help text. Lorem ipsum dolor sit amet.

Extra Large

Example help text. Lorem ipsum dolor sit amet.
Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Small</h4>

    <form class="spectrum-Search spectrum-Search--sizeS">
      <div class="spectrum-Textfield spectrum-Textfield--sizeS spectrum-Search-textfield">
        <svg class="spectrum-Icon spectrum-Icon--sizeS 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>
      <div class="spectrum-HelpText spectrum-HelpText--sizeS spectrum-HelpText--neutral">
        <div id="helptext-1" class="spectrum-HelpText-text">Example help text. Lorem ipsum dolor sit amet.</div>
      </div>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS 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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Medium</h4>

    <form class="spectrum-Search spectrum-Search--sizeM">
      <div class="spectrum-Textfield spectrum-Textfield--sizeM 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>
      <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--neutral">
        <div id="helptext-1" class="spectrum-HelpText-text">Example help text. Lorem ipsum dolor sit amet.</div>
      </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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Large</h4>

    <form class="spectrum-Search spectrum-Search--sizeL">
      <div class="spectrum-Textfield spectrum-Textfield--sizeL spectrum-Search-textfield">
        <svg class="spectrum-Icon spectrum-Icon--sizeL 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>
      <div class="spectrum-HelpText spectrum-HelpText--sizeL spectrum-HelpText--neutral">
        <div id="helptext-1" class="spectrum-HelpText-text">Example help text. Lorem ipsum dolor sit amet.</div>
      </div>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeL 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>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Extra Large</h4>

    <form class="spectrum-Search spectrum-Search--sizeXL">
      <div class="spectrum-Textfield spectrum-Textfield--sizeXL spectrum-Search-textfield">
        <svg class="spectrum-Icon spectrum-Icon--sizeXL 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>
      <div class="spectrum-HelpText spectrum-HelpText--sizeXL spectrum-HelpText--neutral">
        <div id="helptext-1" class="spectrum-HelpText-text">Example help text. Lorem ipsum dolor sit amet.</div>
      </div>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeXL 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>
  </div>
</div>

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.