Chips Combobox Component

Chips Combobox are creators and managers of chip components. They allow user search of existing chip options, additions, and removals of chips. The search/selection follows the pattern of the combobox pattern.

Empty Chips Combobox

This is the simplest type of implementation with an empty chips combobox component usually encountered on initial information entry.

NOTE : For empty Chips Combobox implementations, to avoid layout issues, make sure .chips-combobox__items does NOT have any whitespace.

    Soccer
    Hockey
    Tennis
    <span class="chips-combobox">
  <ul class="chips-combobox__items" aria-label="Selected sports" />
  <span class="combobox combobox--js chips-combobox__combobox">
    <span class="combobox__control chips-combobox_combobox__control">
      <input
        id="chips-combobox-1-input"
        role="combobox"
        type="text"
        placeholder="Add Sport"
        aria-haspopup="listbox"
        aria-owns="listbox-chips-combobox-1"
      />
    </span>
    <div class="combobox__listbox">
      <div
        id="listbox-chips-combobox-1"
        class="combobox__options"
        role="listbox"
      >
        <div class="combobox__option" role="option">
          <span> Soccer </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Hockey </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Tennis </span>
        </div>
      </div>
    </div>
  </span>
</span>

    Fluid Chips Combobox

    Adding the modifier, .chips-combobox--fluid makes the component fluid and expands it to the width of its container.

      Soccer
      Hockey
      Tennis
      <span class="chips-combobox chips-combobox--fluid">
  <ul class="chips-combobox__items" aria-label="Selected sports" />
  <span class="combobox combobox--js chips-combobox__combobox">
    <span class="combobox__control chips-combobox_combobox__control">
      <input
        id="chips-combobox-1-input"
        role="combobox"
        type="text"
        placeholder="Add Sport"
        aria-haspopup="listbox"
        aria-owns="listbox-chips-combobox-1"
      />
    </span>
    <div class="combobox__listbox">
      <div
        id="listbox-chips-combobox-1"
        class="combobox__options"
        role="listbox"
      >
        <div class="combobox__option" role="option">
          <span> Soccer </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Hockey </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Tennis </span>
        </div>
      </div>
    </div>
  </span>
</span>

      Prefilled Chips Combobox

      This is the chips combobox with pre-populated chip items, something you'd see when editing a chips combobox component.

      • Football
      • Basketball
      • Baseball
      Soccer
      Hockey
      Tennis
      <span class="chips-combobox">
  <ul class="chips-combobox__items" aria-label="Selected sports">
    <li>
      <span class="chip">
        <span id="chip-interactive-1-1-text" class="chip__text">
          Football
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-1-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
    <li>
      <span class="chip">
        <span id="chip-interactive-1-2-text" class="chip__text">
          Basketball
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-2-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
    <li>
      <span class="chip">
        <span id="chip-interactive-1-3-text" class="chip__text">
          Baseball
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-3-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
  </ul>
  <span class="combobox combobox--js chips-combobox__combobox">
    <span class="combobox__control chips-combobox_combobox__control">
      <input
        id="chips-combobox-1-input"
        role="combobox"
        type="text"
        placeholder="Add Sport"
        aria-haspopup="listbox"
        aria-owns="listbox-chips-combobox-1"
      />
    </span>
    <div class="combobox__listbox">
      <div
        id="listbox-chips-combobox-1"
        class="combobox__options"
        role="listbox"
      >
        <div class="combobox__option" role="option">
          <span> Soccer </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Hockey </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Tennis </span>
        </div>
      </div>
    </div>
  </span>
</span>

      Chips Combobox in Disabled State

      When disabled, Chips Combobox becomes "frozen" and users are unable to interact with the module - search for, add, and remove chips.

      To turn on this state, add aria-disabled="true" to the outer element of the module. Additonally, you'll need to add the disabled attribute to all the buttons inside as well as the input element for combobox.

      • Football
      • Basketball
      • Baseball
      Soccer
      Hockey
      Tennis
      <span class="chips-combobox" aria-disabled="true">
  <ul class="chips-combobox__items" aria-label="Selected sports">
    <li>
      <span class="chip">
        <span id="chip-interactive-1-1-text" class="chip__text">
          Football
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-1-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
    <li>
      <span class="chip">
        <span id="chip-interactive-1-2-text" class="chip__text">
          Basketball
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-2-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
    <li>
      <span class="chip">
        <span id="chip-interactive-1-3-text" class="chip__text">
          Baseball
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-3-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
  </ul>
  <span class="combobox combobox--js chips-combobox__combobox">
    <span class="combobox__control chips-combobox_combobox__control">
      <input
        id="chips-combobox-1-input"
        role="combobox"
        type="text"
        placeholder="Add Sport"
        aria-haspopup="listbox"
        aria-owns="listbox-chips-combobox-1"
      />
    </span>
    <div class="combobox__listbox">
      <div
        id="listbox-chips-combobox-1"
        class="combobox__options"
        role="listbox"
      >
        <div class="combobox__option" role="option">
          <span> Soccer </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Hockey </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Tennis </span>
        </div>
      </div>
    </div>
  </span>
</span>

      Chips Combobox in Error State

      When a user enters text that is considered to be invalid, the Chips Combobox module can enter an error state. Developers can validate the text entry and trigger invalid/valid states as needed.

      To turn on the error state, add a class of chips-combobox--error to the outer element of the module. To turn off the error state, remove the class.

      In addition to the inclusion of the modifier to turn on the error state, there should also be an accompanying error message relevant to the reason for the error. Per a11y rules, color alone should not be used to indicate an error. For more information, please see the field error state docs .

      • Football
      • Basketball
      • Baseball
      Soccer
      Hockey
      Tennis
      <span class="chips-combobox chips-combobox--error">
  <ul class="chips-combobox__items" aria-label="Selected sports">
    <li>
      <span class="chip">
        <span id="chip-interactive-1-1-text" class="chip__text">
          Football
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-1-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
    <li>
      <span class="chip">
        <span id="chip-interactive-1-2-text" class="chip__text">
          Basketball
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-2-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
    <li>
      <span class="chip">
        <span id="chip-interactive-1-3-text" class="chip__text">
          Baseball
        </span>
        <button
          class="chip__button"
          type="button"
          aria-label="Remove"
          aria-describedby="chip-interactive-1-3-text"
        >
          <svg class="icon icon--12" width="13" height="12" aria-hidden="true">
            <use href="#icon-close-12" />
          </svg>
        </button>
      </span>
    </li>
  </ul>
  <span class="combobox combobox--js chips-combobox__combobox">
    <span class="combobox__control chips-combobox_combobox__control">
      <input
        id="chips-combobox-1-input"
        role="combobox"
        type="text"
        placeholder="Add Sport"
        aria-haspopup="listbox"
        aria-owns="listbox-chips-combobox-1"
      />
    </span>
    <div class="combobox__listbox">
      <div
        id="listbox-chips-combobox-1"
        class="combobox__options"
        role="listbox"
      >
        <div class="combobox__option" role="option">
          <span> Soccer </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Hockey </span>
        </div>
        <div class="combobox__option" role="option">
          <span> Tennis </span>
        </div>
      </div>
    </div>
  </span>
</span>
      Chip ComponentCombobox Component