• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Picker

Component status
Contribution
Current version@spectrum-css/picker@7.2.7
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Closed

Country

Open

  • Donaudampfschifffahrtsgesellschaftskapitän
  • Some long value that should be cut off
  • Very long text with hyphens-between-words
  • United States of America

Side Label

Country

Open with Thumbnails

Country
  • Donaudampfschifffahrtsgesellschaftskapitän
  • Some long value that should be cut off
  • Very long text with hyphens-between-words
  • United States of America

Disabled

Closed and Loading

Closed and Invalid

Closed and Invalid with Help Text

Preferred contact method
Select a contact method.

Open and Invalid

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Closed and Disabled with Thumbnails

Show markup
<div class="spectrum-Examples" style="flex-direction: column;">

  <!-- Closed -->
  <div class="spectrum-Examples-item">
    <h4>Closed</h4>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Country</div>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label is-placeholder">Select a Country with a very long label, too long in fact</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
  </div>

  <!-- Open -->
  <div class="spectrum-Examples-item">
    <h4>Open</h4>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-open" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label">Donaudampfschifffahrtsgesellschaftskapitän</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
    <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 240px;">
      <ul class="spectrum-Menu is-selectable" role="listbox">
        <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
          <span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
        <li class="spectrum-Menu-item" role="option" tabindex="0">
          <span class="spectrum-Menu-itemLabel">Some long value that should be cut off</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
        <li class="spectrum-Menu-item" role="option" tabindex="0">
          <span class="spectrum-Menu-itemLabel">Very long text with hyphens-between-words</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
        <li class="spectrum-Menu-divider" role="separator"></li>
        <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
          <span class="spectrum-Menu-itemLabel">United States of America</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
      </ul>
    </div>
  </div>

  <div class="dummy-spacing" style="block-size: 15rem;"></div>

  <!-- Side Label -->
  <div class="spectrum-Examples-item">
    <h4>Side Label</h4>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">Country</div>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--sideLabel" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label is-placeholder">Select a Country with a very long label, too long in fact</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
  </div>

  <!-- Open with Thumbnails -->
  <div class="spectrum-Examples-item">

    <h4>Open with Thumbnails</h4>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Country</div>
      <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-open" aria-haspopup="listbox" style="width: 240px">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-icon" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Picker-label">Donaudampfschifffahrtsgesellschaftskapitän</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100" />
        </svg>
      </button>
      <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 240px">
        <ul class="spectrum-Menu is-selectable" role="listbox">
          <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
              <use xlink:href="#spectrum-icon-18-Image" />
            </svg>
            <span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </li>
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
              <use xlink:href="#spectrum-icon-18-Image" />
            </svg>
            <span class="spectrum-Menu-itemLabel">Some long value that should be cut off</span>
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </li>
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
              <use xlink:href="#spectrum-icon-18-Image" />
            </svg>
            <span class="spectrum-Menu-itemLabel">Very long text with hyphens-between-words</span>
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </li>
          <li class="spectrum-Menu-divider" role="separator"></li>
          <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
              <use xlink:href="#spectrum-icon-18-Image" />
            </svg>
            <span class="spectrum-Menu-itemLabel">United States of America</span>
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </li>
        </ul>
      </div>
  </div>

  <div class="dummy-spacing" style="block-size: 15rem;"></div>

  <!-- Disabled -->
  <div class="spectrum-Examples-item">
    <h4>Disabled</h4>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM" disabled aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
  </div>

  <!-- Closed and Loading -->
  <div class="spectrum-Examples-item">
    <h4>Closed and Loading</h4>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-loading" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label is-placeholder">Loading...</span>
      <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small">
          <div class="spectrum-ProgressCircle-track"></div>
          <div class="spectrum-ProgressCircle-fills">
            <div class="spectrum-ProgressCircle-fillMask1">
              <div class="spectrum-ProgressCircle-fillSubMask1">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
          <div class="spectrum-ProgressCircle-fillMask2">
            <div class="spectrum-ProgressCircle-fillSubMask2">
              <div class="spectrum-ProgressCircle-fill"></div>
            </div>
          </div>
        </div>
      </div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>

  </div>

  <!-- Close and Invalid -->
  <div class="spectrum-Examples-item">
    <h4>Closed and Invalid</h4>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
  </div>

    <!-- Close and Invalid with Help Text -->
  <div class="spectrum-Examples-item">
    <h4>Closed and Invalid with Help Text</h4>
    <div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
      Preferred contact method
      <svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Asterisk100" />
      </svg>
    </div>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label is-placeholder">Select a contact method</span>
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Folder">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
    <div class="spectrum-HelpText spectrum-HelpText--sizeM spectrum-HelpText--negative">
      <div class="spectrum-HelpText-text">Select a contact method.</div>
    </div>
  </div>


  <!-- Open and Invalid -->
  <div class="spectrum-Examples-item">
    <h4>Open and Invalid </h4>
    <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid is-open" aria-haspopup="listbox" style="width: 240px">
      <span class="spectrum-Picker-label">Ballard</span>
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Alert">
        <use xlink:href="#spectrum-icon-18-Alert" />
      </svg>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
    <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 240px">
      <ul class="spectrum-Menu is-selectable" role="listbox">
        <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
          <span class="spectrum-Menu-itemLabel">Ballard</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
        <li class="spectrum-Menu-item" role="option" tabindex="0">
          <span class="spectrum-Menu-itemLabel">Fremont</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
        <li class="spectrum-Menu-item" role="option" tabindex="0">
          <span class="spectrum-Menu-itemLabel">Greenwood</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
        <li class="spectrum-Menu-divider" role="separator"></li>
        <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
          <span class="spectrum-Menu-itemLabel">United States of America</span>
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
        </li>
      </ul>
    </div>
  </div>

  <div class="dummy-spacing" style="block-size: 10rem;"></div>

  <div class="spectrum-Examples-item">
    <h4>Closed and Disabled with Thumbnails</h4>
    <div style="position: relative; width: 240px;">
      <button type="button" class="spectrum-Picker spectrum-Picker--sizeM is-invalid" disabled aria-haspopup="listbox" style="width: 240px">
        <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Alert">
          <use xlink:href="#spectrum-icon-18-Alert" />
        </svg>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Chevron100" />
        </svg>
      </button>
    </div>
  </div>
</div>

Sizing
Contribution

S

M

L

XL

Show markup
<h4>S</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeS" aria-haspopup="listbox" style="width: 240px">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown75 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron75" />
  </svg>
</button>

<h4>M</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM" aria-haspopup="listbox" style="width: 240px">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>

<h4>L</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeL" aria-haspopup="listbox" style="width: 240px">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown200 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron200" />
  </svg>
</button>

<h4>XL</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeXL" aria-haspopup="listbox" style="width: 240px">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown300 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron300" />
  </svg>
</button>

Quiet
Contribution

Closed

Country

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Open - With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Side Label

Country

Disabled

Closed and Invalid

Open and Invalid

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled and Invalid

Show markup
<h4>Closed</h4>
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Country</div>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet" aria-haspopup="listbox">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>

<h4>Open</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-open" aria-haspopup="listbox">
  <span class="spectrum-Picker-label">Ballard</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
  <ul class="spectrum-Menu is-selectable" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Open - With Thumbnails</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-open" aria-haspopup="listbox">
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-icon" focusable="false" aria-hidden="true" aria-label="Image">
    <use xlink:href="#spectrum-icon-18-Image" />
  </svg>
  <span class="spectrum-Picker-label">Ballard</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
  <ul class="spectrum-Menu is-selectable" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon"" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon"" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon"" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">United States of America</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Side Label</h4>
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left">Country</div>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-Picker--sideLabel is-open" aria-haspopup="listbox">
  <span class="spectrum-Picker-label">Ballard</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>

<h4>Disabled</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet" disabled aria-haspopup="listbox">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>

<h4>Closed and Invalid</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-invalid" aria-haspopup="listbox">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Folder">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>

<h4>Open and Invalid</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM
spectrum-Picker--quiet is-invalid is-open" aria-haspopup="listbox">
  <span class="spectrum-Picker-label">Ballard</span>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Alert">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
  <ul class="spectrum-Menu is-selectable" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
      <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </svg>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled and Invalid</h4>
<button type="button" class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-invalid" disabled aria-haspopup="listbox">
  <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
  <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" aria-label="Alert">
    <use xlink:href="#spectrum-icon-18-Alert" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Chevron100" />
  </svg>
</button>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Component renamed

Dropdown is now known as Picker. Replace all .spectrum-Dropdown* classnames with .spectrum-Picker*.

Markup change

The outer <div> is now gone and .spectrum-FieldButton is no longer used. Instead, the outer tag is now <button> with the .spectrum-Picker classname.

Additionally, .spectrum-Picker should not contain the .spectrum-Popover that it opens.

In order to use a side label with a Picker, add the spectrum-Picker--sideLabel class to the Picker.

Icon classname changes

Each of the 3 possible icons now has its own specific classname:

Previous icon classname Workflow icon classname
.spectrum-Picker-icon .spectrum-Picker-menuIcon
.spectrum-Icon (workflow) .spectrum-Picker-icon
.spectrum-Icon (validation) .spectrum-Picker-validationIcon

.is-selected is now .is-open

In order to more accurately reflect what’s going on, you should add .is-open to .spectrum-Picker when the menu is shown.

Change workflow icon size to medium

If you use a .spectrum-Picker-icon in your markup, please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.

T-shirt sizing

Picker now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Picker--size* class.
Using the classes .spectrum-Picker .spectrum-Picker--sizeM will get result in the previous default picker size.

Also, use the correct icon size for chevron icons:

T-shirt Size Icon Size
spectrum-Picker--sizeS spectrum-css-icon-Chevron75
spectrum-Picker--sizeM spectrum-css-icon-Chevron100
spectrum-Picker--sizeL spectrum-css-icon-Chevron200
spectrum-Picker--sizeXL spectrum-css-icon-Chevron300

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.