name: Combobox
SpectrumSiteSlug: https://spectrum.adobe.com/page/combo-box/
sections:
  - name: Migration Guide
    description: |
      ### New Picker markup
      Instead of a `.spectrum-FieldButton`, Combobox now uses `.spectrum-Picker`. See [Picker migration guide](picker.html#migrationguide) for details.

      ### New Textfield markup
      InputGroup now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information.

      ### Additional clases
      The following classes must be added:

      * `.spectrum-InputGroup-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`)
      * `.spectrum-InputGroup-input` is now required on the `<input>` element inside of Textfields (`.spectrum-Textfield-input`)
      * `.spectrum-InputGroup-button` is now required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`)

      ### Renamed classes

      * `.spectrum-Datepicker--rangeDash` renamed to `.spectrum-Datepicker-rangeDash`

      ### Removed elements

      * `.spectrum-Datepicker-focusRing` is no longer required and should be removed

      ### Indicating validity and focus
      Validity and focus must be bubbled up to the parent so descendants siblings can be styled.

      Thus, implementations must add the following classes in the following situations:

      * `.spectrum-InputGroup.is-focused` - when the input or button is focused with the mouse
      * `.spectrum-InputGroup.is-keyboardFocused` - when the input or button is focused with the keyboard
      * `.spectrum-InputGroup.is-valid` - when the input has an explicit valid state
      * `.spectrum-InputGroup.is-invalid` - when the input has an explicit invalid state
      * `.spectrum-InputGroup.is-disabled` - when the control is disabled. You must also add `.is-disabled` to the `.spectrum-InputGroup-textfield` and `[disabled]` to the `.spectrum-InputGroup-button`.

examples:
  - id: combobox
    name: Standard
    markup: |
      <h4>Default</h4>
      <div class="spectrum-InputGroup">
        <div class="spectrum-Textfield spectrum-InputGroup-textfield">
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <h4>Open</h4>
      <div class="spectrum-InputGroup is-open">
        <div class="spectrum-Textfield spectrum-InputGroup-textfield">
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
        <div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; left: 0; width: 100%">
          <ul class="spectrum-Menu" role="listbox">
            <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
              <span class="spectrum-Menu-itemLabel">Ballard</span>
            </li>
            <li class="spectrum-Menu-item" role="option" tabindex="0">
              <span class="spectrum-Menu-itemLabel">Fremont</span>
            </li>
            <li class="spectrum-Menu-item" role="option" tabindex="0">
              <span class="spectrum-Menu-itemLabel">Greenwood</span>
            </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>
            </li>
          </ul>
        </div>
      </div>

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

      <h4>Disabled</h4>
      <div class="spectrum-InputGroup is-disabled">
        <div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <h4>Invalid</h4>
      <div class="spectrum-InputGroup is-invalid">
        <div class="spectrum-Textfield is-invalid spectrum-InputGroup-textfield">
          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-Alert" />
          </svg>
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>
  - id: combobox-quiet
    name: Quiet
    markup: |
      <h4>Default</h4>
      <div class="spectrum-InputGroup spectrum-InputGroup--quiet">
        <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <h4>Open</h4>
      <div class="spectrum-InputGroup spectrum-InputGroup--quiet is-open">
        <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
        <div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; width: 100%">
          <ul class="spectrum-Menu" role="listbox">
            <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
              <span class="spectrum-Menu-itemLabel">Ballard</span>
            </li>
            <li class="spectrum-Menu-item" role="option" tabindex="0">
              <span class="spectrum-Menu-itemLabel">Fremont</span>
            </li>
            <li class="spectrum-Menu-item" role="option" tabindex="0">
              <span class="spectrum-Menu-itemLabel">Greenwood</span>
            </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>
            </li>
          </ul>
        </div>
      </div>

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

      <h4>Disabled</h4>
      <div class="spectrum-InputGroup spectrum-InputGroup--quiet is-disabled">
        <div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>

      <h4>Invalid</h4>
      <div class="spectrum-InputGroup spectrum-InputGroup--quiet is-invalid">
        <div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid spectrum-InputGroup-textfield">
          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-Alert" />
          </svg>
          <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
        </div>
        <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Chevron100" />
          </svg>
        </button>
      </div>