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

Picker

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/picker@1.0.0-beta.2

Variants


Standard
Verified

Closed

Open

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

With Thumbnails

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

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Show markup
<h4>Closed</h4>
<div class="spectrum-Picker" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="listbox">
    <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-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Picker is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger is-selected" aria-haspopup="listbox">
    <span class="spectrum-Picker-label">Donaudampfschifffahrtsgesellschaftskapitän</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 class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

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

<h4>With Thumbnails</h4>
<div class="spectrum-Picker is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger is-selected" aria-haspopup="listbox">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" 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-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" 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" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </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" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

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

<h4>Disabled</h4>
<div class="spectrum-Picker is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger" disabled aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</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>

<h4>Closed</h4>
<div class="spectrum-Picker is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger is-invalid" aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <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>

<h4>Open</h4>
<div class="spectrum-Picker is-open is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger is-invalid is-selected" aria-haspopup="listbox">
    <span class="spectrum-Picker-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <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 class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

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

<h4>Disabled</h4>
<div class="spectrum-Picker is-invalid is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Picker-trigger is-invalid" disabled aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <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>

Quiet
Verified

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Show markup
<h4>Closed</h4>
<div class="spectrum-Picker spectrum-Picker--quiet">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Picker-trigger" aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</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>

<h4>Open</h4>
<div class="spectrum-Picker spectrum-Picker--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Picker-trigger is-selected" aria-haspopup="listbox">
    <span class="spectrum-Picker-label">Ballard</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-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
  </ul>
</div>

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

<h4>With Thumbnails</h4>
<div class="spectrum-Picker spectrum-Picker--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Picker-trigger is-selected" aria-haspopup="listbox">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" 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-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" 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" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </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" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
  </ul>
</div>

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

<h4>Disabled</h4>
<div class="spectrum-Picker spectrum-Picker--quiet is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Picker-trigger" disabled aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</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>

<h4>Closed</h4>
<div class="spectrum-Picker spectrum-Picker--quiet is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Picker-trigger" aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <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>

<h4>Open</h4>
<div class="spectrum-Picker spectrum-Picker--quiet is-open is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Picker-trigger" aria-haspopup="listbox">
    <span class="spectrum-Picker-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <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-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" 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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </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-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
  </ul>
</div>

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

<h4>Disabled</h4>
<div class="spectrum-Picker spectrum-Picker--quiet is-invalid is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Picker-trigger" disabled aria-haspopup="listbox">
    <span class="spectrum-Picker-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <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>

Migration Guide


Component renamed

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

Change workflow icon size to medium

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