- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Search
Component status | Contribution |
---|---|
Current version | @spectrum-css/search@7.1.4 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/search@8.0.0-s2-foundations.17 |
Released | October 4, 2024 |
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
StandardContribution
Default
Disabled
<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>
QuietContribution
Default
Disabled
<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 TextContribution
Standard
Quiet
<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 SizesContribution
Small
Medium
Large
Extra Large
<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
.