Combobox
Autocomplete: a text input that filters a listbox as you type. Keyboard navigation and aria-activedescendant included.
Framework picker
- Astro
- Laravel
- Next.js
- Nuxt
- Ruby on Rails
- SvelteKit
- WordPress
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/combobox.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.