Components

Combobox

A typeahead — an .ds-input field with a filtered popover list. Type to narrow the options, move the active row with the arrow keys, Enter to select, Escape or an outside-click to close. Full ARIA combobox roles.

Anatomy

A relative .ds-combobox wrapper anchors a bordered .ds-combobox__list popover (z-index --ds-z-popover) under the field. Each .ds-combobox__option shifts to the alt surface on hover or when active; the current value carries aria-selected.

Field + list
  • EUR — Euro
  • USD — US Dollar
  • GBP — Pound Sterling
<div class="ds-combobox">
  <input class="ds-combobox__input" type="text" role="combobox"
         aria-expanded="true" aria-controls="cb-list" aria-autocomplete="list">
  <ul class="ds-combobox__list" id="cb-list" role="listbox">
    <li class="ds-combobox__option is-active" role="option" aria-selected="true">EUR — Euro</li>
    <li class="ds-combobox__option" role="option">USD — US Dollar</li>
    <li class="ds-combobox__option" role="option">GBP — Pound Sterling</li>
  </ul>
</div>

Interactive

Type to filter; use ArrowUp / ArrowDown then Enter to pick, or click an option. Escape or an outside-click closes the list. The small inline script below wires this demo (no dependencies).

Typeahead 
<div class="ds-combobox" data-combobox>
  <input class="ds-combobox__input" type="text" role="combobox"
         placeholder="Search currency…" aria-expanded="false"
         aria-controls="cb-list" aria-autocomplete="list" data-combobox-input>
  <ul class="ds-combobox__list" id="cb-list" role="listbox" hidden data-combobox-list>
    <li class="ds-combobox__option" role="option">EUR — Euro</li>
    <li class="ds-combobox__option" role="option">USD — US Dollar</li>
    <li class="ds-combobox__option" role="option">GBP — Pound Sterling</li>
  </ul>
</div>

React

The Combobox filters options as you type, manages the active option and open state, and supports controlled (value) or uncontrolled (defaultValue) use. Pass allowCustom to keep free text that matches no option.

<Combobox> 
import { Combobox } from "@diametral/design-system/react";

<Combobox
  placeholder="Search currency…"
  defaultValue="EUR"
  options={[
    { value: "EUR", label: "EUR — Euro" },
    { value: "USD", label: "USD — US Dollar" },
    { value: "GBP", label: "GBP — Pound Sterling" },
  ]}
  onChange={(value) => setCurrency(value)}
/>