# Combobox · MIAN

Autocomplete: a text input that filters a listbox as you type. Keyboard navigation and aria-activedescendant included.

- Id: `combobox` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/combobox
- Use for: autocomplete, searchable select, typeahead, filter as you type.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-combobox`: Wrapper.
- `mn-combobox-list`: The listbox; children are role="option".
- `mn-combobox-toggle`: Optional chevron button.

## Accessibility

- Follows the WAI-ARIA combobox pattern: role="combobox", aria-expanded, aria-controls, aria-activedescendant.
- ArrowDown opens and moves, Enter selects, Escape closes then clears. Focus never leaves the input.
- Emits mn:change with the selected value.

## Examples

### Framework picker

```html
<div class="mn-field" style="max-width:22rem">
  <label class="mn-label" for="cb-1">Framework</label>
  <div class="mn-combobox">
    <input class="mn-input" id="cb-1" placeholder="Search frameworks…">
    <button class="mn-combobox-toggle" type="button" aria-label="Show frameworks"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
    <ul class="mn-combobox-list">
      <li role="option" data-value="astro">Astro</li>
      <li role="option" data-value="laravel">Laravel</li>
      <li role="option" data-value="next">Next.js</li>
      <li role="option" data-value="nuxt">Nuxt</li>
      <li role="option" data-value="rails">Ruby on Rails</li>
      <li role="option" data-value="svelte">SvelteKit</li>
      <li role="option" data-value="wordpress">WordPress</li>
    </ul>
  </div>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/combobox/source