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

Combobox

Component status
Verified
Last releasedFebruary 2, 2021
Current version@spectrum-css/inputgroup@3.0.0

Variants


Standard
Contribution

Default

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Invalid

Show 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>

Quiet
Contribution

Default

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Invalid

Show 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>

Migration Guide


New Picker markup

Instead of a .spectrum-FieldButton, Combobox now uses .spectrum-Picker. See Picker migration guide for details.

New Textfield markup

InputGroup now uses the new Textfield markup. See the Textfield migration guide 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.