Combobox Component

Default Combobox

Selecting an option should simply fill the textbox with that value. Options may not have state or any other kind of secondary behaviour.

<span class="combobox">
  <span class="combobox__control">
    <input
      placeholder="Combobox"
      role="combobox"
      type="text"
      aria-haspopup="listbox"
      aria-owns="listbox-1"
    />
  </span>
  <div class="combobox__listbox">
    <div id="listbox-1" class="combobox__options" role="listbox">
      <div class="combobox__option" role="option">
        <span> Option 1 </span>
      </div>
      <div class="combobox__option" role="option">
        <span> Option 2 </span>
      </div>
      <div class="combobox__option" role="option">
        <span> Option 3 </span>
      </div>
    </div>
  </div>
</span>

Disabled Combobox

Apply the disabled property to disable the combobox.

<span class="combobox">
  <span class="combobox__control">
    <input
      placeholder="Combobox"
      role="combobox"
      type="text"
      aria-haspopup="listbox"
      aria-owns="listbox-2"
      disabled
    />
  </span>
  <div class="combobox__listbox">
    <div id="listbox-2" class="combobox__options" role="listbox">
      <div class="combobox__option" role="option">
        <span> Option 1 </span>
      </div>
      <div class="combobox__option" role="option">
        <span> Option 2 </span>
      </div>
      <div class="combobox__option" role="option">
        <span> Option 3 </span>
      </div>
    </div>
  </div>
</span>