select
Custom picker where the platform allows (base-select); native picker elsewhere. Zero JS either way.
Example
Basic usage
<select>
<option>Engineer</option>
<option>Designer</option>
</select>API
select and option retain their complete native attributes, events, keyboard interaction, and form behavior. Mica adds picker presentation where the platform supports customizable selects.
Content/markup contracts
| Content | Contract | Default | Description |
|---|---|---|---|
option | native select content | — | Authored options remain the source of labels, values, disabled state, and selection. |
Styling
| Target | Value | Default | Description |
|---|---|---|---|
| Single select | select:not([multiple], [size]) | Mica control height | Uses the field family presentation. Supporting browsers receive a styled picker; other browsers retain the native picker. |
select.js
Optional. Keeps the selected option aligned over the trigger when the open customizable picker supports it. JavaScript supplies the selected index and CSS handles the geometry. Without the module, the styled picker anchors below the trigger; browsers without customizable select support keep their native picker.
<script type="module" src="mica/select.js"></script>