Combobox

A text field with a filtered list of suggestions, for picking from long lists such as clients or cities.

Needs dsgn.js components/combobox.css

Pick a client

Client

Type to filter, for example "nov".

<div class="dsgn-field" style="max-inline-size: 24rem">
  <label class="dsgn-label" for="dx-cb">Client</label>
  <div class="dsgn-input dsgn-combobox">
    <input id="dx-cb" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="dx-cb-list" autocomplete="off" aria-describedby="dx-cb-h">
    <span class="dsgn-icon" aria-hidden="true">expand_more</span>
    <input type="hidden" name="client_id">
  </div>
  <p class="dsgn-hint" id="dx-cb-h">Type to filter, for example "nov".</p>
  <div class="dsgn-menu" id="dx-cb-list" role="listbox" popover="manual" aria-label="Clients">
    <div class="dsgn-menu-item" role="option" id="dx-cb-1" data-value="7">Novama s.r.o.</div>
    <div class="dsgn-menu-item" role="option" id="dx-cb-2" data-value="9">Nona Design</div>
    <div class="dsgn-menu-item" role="option" id="dx-cb-3" data-value="12">Studio Kolo</div>
    <div class="dsgn-menu-item" role="option" id="dx-cb-4" data-value="15">Awesome Dogs</div>
    <div class="dsgn-menu-item" role="option" id="dx-cb-5" data-value="21">Jana Nováková</div>
    <div class="dsgn-menu-label" data-combobox-empty hidden>No client matches</div>
  </div>
</div>

Usage

WAI-ARIA combobox with list autocomplete: typing filters the options (case and diacritics insensitive, "nov" finds "Nováková"), ArrowDown / ArrowUp move the highlight (aria-activedescendant, focus stays in the input), Enter or a click picks, Escape closes then clears, Tab leaves. Picking writes the option text into the input, data-value into the hidden input (if any) and fires change on the input plus a "dsgn-select" event with { value, label, option }. A polite status message announces the number of matches. Remote data: set data-filter="none" on the listbox, listen to input, replace the options yourself. For a short fixed list use a Select; a combobox is for long lists (clients, cities, products).

Details

Classes: .dsgn-combobox .dsgn-icon .dsgn-menu .dsgn-menu-item
Tokens used: --dsgn-duration-fast --dsgn-ease --dsgn-focus-width --dsgn-font-weight-semibold
In Figma: Combobox
Import alone: dsgn.systems/components/combobox.css