# Select · MIAN

A styled native select. Keeps the platform picker on mobile and full keyboard support everywhere.

- Id: `select` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/select
- Use for: dropdown select, choose from list, country select, native select.
- Alternatives: combobox, radio-card.

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">
```

## Classes

- `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.

## Examples

### Basic

```html
<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

```html
<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>
```

## Source

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