mica
mica

select

Custom picker where the platform allows (base-select); native picker elsewhere. Zero JS either way.

Example

Basic usage

// Native elements: no components, plain JSX.
<select>
  <option>Engineer</option>
  <option>Designer</option>
</select>
<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

ContentContractDefaultDescription
optionnative select content—Authored options remain the source of labels, values, disabled state, and selection.

Styling

TargetValueDefaultDescription
Single selectselect:not([multiple], [size])Mica control heightUses 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.

// A native select has no component, so opt in to select.js where you
// render one (or once in your layout). It renders nothing and loads the
// module on the client.
import { MicaModule } from "@akonwi/mica/react";

<MicaModule name="select" />
<script type="module" src="mica/select.js"></script>
← input & textareacheckbox →