Select
A styled native select. Keeps the platform picker on mobile and full keyboard support everywhere.
Basic
<div class="mn-field" style="max-width:20rem">
<label class="mn-label" for="sel-1">Country</label>
<select class="mn-select" id="sel-1">
<option>Romania</option><option>Japan</option><option>Vietnam</option><option>Malaysia</option>
</select>
</div>With groups
<select class="mn-select" style="max-width:20rem" aria-label="Noodle">
<optgroup label="Japan"><option>Udon</option><option>Soba</option><option>Ramen</option></optgroup>
<optgroup label="Vietnam"><option>Pho</option><option>Bún</option></optgroup>
</select>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/select.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-select | Styled native <select>. |
| mn-input-sm · mn-input-lg | Sizes. |
Accessibility
- It is a real select: every assistive technology already knows how to use it. For search-as-you-type, use Combobox.