• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Search Within

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/searchwithin@3.0.0-beta.6

Usage notes


Override the width of the component where necessary.

Variants


Standard
Contribution

Default

Open

  • All
  • Campaigns
  • Audiences
  • Tags

Default (Changed Selection)

Disabled

Show markup
<h4>Default</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Picker spectrum-SearchWithin-dropdown">
    <button type="button" class="spectrum-FieldButton spectrum-Picker-trigger spectrum-SearchWithin-pickerTrigger" aria-haspopup="true">
      <span class="spectrum-Picker-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Textfield">
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off">
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<h4>Open</h4>
<form class="spectrum-SearchWithin" style="margin-bottom: 180px;">
  <div class="spectrum-Picker spectrum-SearchWithin-dropdown is-open">
    <button type="button" class="spectrum-FieldButton spectrum-Picker-trigger spectrum-SearchWithin-pickerTrigger is-selected" aria-haspopup="true">
      <span class="spectrum-Picker-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Textfield">
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off">
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>

  <div class="spectrum-Popover is-open" style="position: absolute; top: 38px; left: 0;">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">All</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Campaigns</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Audiences</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Tags</span>
      </li>
    </ul>
  </div>
</form>

<h4>Default (Changed Selection)</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Picker spectrum-SearchWithin-dropdown">
    <button type="button" class="spectrum-FieldButton spectrum-Picker-trigger spectrum-SearchWithin-pickerTrigger" aria-haspopup="true">
      <span class="spectrum-Picker-label">Campaigns</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Textfield">
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off">
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<h4>Disabled</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Picker spectrum-SearchWithin-dropdown is-disabled">
    <button type="button" class="spectrum-FieldButton spectrum-Picker-trigger spectrum-SearchWithin-pickerTrigger" disabled aria-haspopup="true">
      <span class="spectrum-Picker-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Textfield is-disabled">
    <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield-input spectrum-SearchWithin-input" autocomplete="off" value="Term" disabled>
  </div>
  <button type="reset" class="spectrum-ClearButton spectrum-SearchWithin-clearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>