Combobox

Editable single-select field with list autocomplete visuals. CSS owns presentation; runtime packages own filtering, selection, keyboard behavior, focus, and ARIA state.

Closed

Device

Type to find one device.

Open And Active

Location

The active option is referenced by aria-activedescendant.

Result States

Owner

Area

No results found

User

Loading options...

Field States

Device

Select a valid device.

Device

Disabled fields cannot open.

Dark Theme

Device

Runtime Contract

Import Input before Combobox when using granular CSS. A runtime must implement filtering, selection, keyboard handling, focus, announcements, popup state, and cleanup. Follow the WAI-ARIA Combobox pattern.

import "@seventh-ui/css/core.css";
import "@seventh-ui/css/components/input.css";
import "@seventh-ui/css/components/combobox.css";

<div class="sui-combobox">
  <div class="sui-input">
    <input class="sui-input__control sui-combobox__control"
      role="combobox" aria-autocomplete="list"
      aria-expanded="false" aria-controls="device-options">
    <button class="sui-input__action sui-combobox__toggle"
      type="button" tabindex="-1" aria-label="Show options"></button>
  </div>
  <div class="sui-combobox__popup">
    <div class="sui-combobox__listbox" id="device-options" role="listbox">
      <div class="sui-combobox__option" role="option"
        aria-selected="false">Main entrance</div>
    </div>
  </div>
</div>