Comboboxes
Search and choose an item from a potentially long list.
Live preview
- Design systems
- Engineering
- Product operations
- Research lab
- Customer experience
HTML
<div class="xsh-field" style="max-width:380px;width:100%">
<label class="xsh-label" for="xsh-demo-combo">Assign team</label>
<div class="xsh-combobox" data-xsh-combobox>
<input id="xsh-demo-combo" class="xsh-input" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="xsh-demo-combo-list" placeholder="Search a team..." autocomplete="off">
<input type="hidden" name="team">
<ul class="xsh-combobox__list" id="xsh-demo-combo-list" role="listbox" hidden>
<li role="option" data-xsh-value="design" aria-selected="false">Design systems</li>
<li role="option" data-xsh-value="engineering" aria-selected="false">Engineering</li>
<li role="option" data-xsh-value="product" aria-selected="false">Product operations</li>
<li role="option" data-xsh-value="research" aria-selected="false">Research lab</li>
<li role="option" data-xsh-value="support" aria-selected="false">Customer experience</li>
</ul>
</div>
<small class="xsh-help">Type to filter, then use Arrow keys and Enter to select.</small>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
data-xsh-combobox | Used by the example markup and component styles or behavior. |
role=combobox | Used by the example markup and component styles or behavior. |
role=listbox | Used by the example markup and component styles or behavior. |
role=option | Used by the example markup and component styles or behavior. |
data-xsh-value | Used by the example markup and component styles or behavior. |
xsh:combobox-change | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Text input retains focus. Arrow keys change aria-activedescendant, Enter commits a choice, Escape collapses results.
Implementation note. Use a stable hidden input when selected values need to be submitted with a native form. Supply unique option IDs.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.