Components / Picker - Default ⋅ Storybook

Migrated

Name	Description	Default	Control
Component
Size*	string	-
Label position	string	-
Quiet styling	An alternative way to display the Picker without a visible background. boolean	-
Content
Help text	Optional help text that can be informational or an error message. Displays a separate help text component after the picker. For error messages, the invalid control must also be set to true. string	-
Label	The label text that is displayed above or to the side of the Picker. This uses a separate Label component outside of the Picker markup. string	-	Country
Value or placeholder	The text within the Picker that represents its current value or placeholder. string	-	Select a country
Advanced
Show workflow icon	Display optional workflow icon before the value or placeholder boolean	-
State
Active	boolean	-
Disabled	boolean	-
Hovered	boolean	-
Invalid	When in the invalid state, some styles change on the Picker, and an invalid icon displays next to the disclosure icon. boolean	-
Keyboard Focused	boolean	-
Loading	When in the loading state, a progress circle will display next to the disclosure icon. boolean	-
Open	boolean	-

<div
  class="spectrum-Picker spectrum-Picker--sizeM"
  style="position: relative; display: inline-block; --spectrum-downstate-width: 208px; --spectrum-downstate-height: 65.1875px;"
>
  <label
    class="spectrum-FieldLabel spectrum-FieldLabel--sizeM"
    style=""
    id="fieldlabel-42ncg"
  >
    Country
  </label>

  <button
    aria-haspopup="listbox"
    type="button"
    class="spectrum-Picker-button"
    id="picker-button-gv2d1"
    style=""
    aria-labelledby="fieldlabel-42ncg"
  >
    <span class="spectrum-Picker-label is-placeholder">Select a country</span>

    <svg
      focusable="false"
      aria-hidden="true"
      role="img"
      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
      id="icon-mbd3a"
      aria-label="ChevronDown100"
    >
      <title id="Chevron100">Chevron100</title>
      <use
        xlink:href="#spectrum-css-icon-Chevron100"
        href="#spectrum-css-icon-Chevron100"
      ></use>
    </svg>
  </button>

  <div
    style="--spectrum-popover-height:158px;--spectrum-popover-width:105px;position:relative;display:block;align-items:center;justify-content:center;"
  >
    <div
      role="presentation"
      class="spectrum-Popover spectrum-Popover--sizeM spectrum-Popover--bottom-start spectrum-Picker-popover"
      style="inset-block-start:100%;inset-inline-start:0;min-inline-size:100%;--mod-menu-inline-size:100%;display:block;"
      id="popover-33k4g"
      data-testid="popover-33k4g"
    >
      <ul
        class="spectrum-Menu spectrum-Menu--sizeM"
        id="menu-vjzlv"
        role="menu"
        aria-labelledby="menu-label-vauiz"
        aria-disabled="false"
        style=""
      >
        <li
          class="spectrum-Menu-item"
          style=""
          id="menuitem-lhm2x"
          role="menuitem"
          aria-selected="false"
          aria-disabled="false"
          tabindex="0"
        >
          <span class="spectrum-Menu-itemLabel">United States of America</span>
        </li>

        <li
          class="spectrum-Menu-item"
          style=""
          id="menuitem-bhygp"
          role="menuitem"
          aria-selected="false"
          aria-disabled="false"
          tabindex="0"
        >
          <span class="spectrum-Menu-itemLabel">India</span>
        </li>

        <li
          class="spectrum-Menu-item"
          style=""
          id="menuitem-153hf"
          role="menuitem"
          aria-selected="false"
          aria-disabled="false"
          tabindex="0"
        >
          <span class="spectrum-Menu-itemLabel">Australia</span>
        </li>

        <li
          class="spectrum-Menu-item"
          style=""
          id="menuitem-abgul"
          role="menuitem"
          aria-selected="false"
          aria-disabled="false"
          tabindex="0"
        >
          <span class="spectrum-Menu-itemLabel">Brazil</span>
        </li>
      </ul>
    </div>
  </div>
</div>