Select
A styled native select for dropdown fields.
A native <select> with the browser chrome removed and a chevron drawn in. Field renders it for dropdown. Native on purpose: it is accessible and works on every device without a custom listbox.
Preview
Usage
// { key: 'role', type: 'dropdown', label: 'Your role', options: ['Founder', 'Engineer', 'Designer', { value: 'other', label: 'Something else' }], required: true }
import { Form } from '@trymirio/mirio';
<Form schema={signup} client={mirio} />
Options are the schema's options: plain strings (value = label) or { value, label } objects. The submitted value is the option value.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name |
string |
required | The field key. |
className |
string |
control classes + appearance-none pr-10 |
Merged onto the <select>. |
…<select> attributes |
Everything except name, value, onChange. autocomplete defaults to the schema's value. |
Renders <div data-mirio="select-wrap" class="relative"><select data-mirio="select" …><option value="">…</option>…</select><svg/></div>. data-mirio="select" and className are both on the <select>; the wrapper (data-mirio="select-wrap") only positions the chevron. The first option is the placeholder (field.placeholder, default "Select an option"); while it is selected the <select> carries data-placeholder so its text can be muted.
Variants and states
Required, error and disabled follow Input. Prefill with defaultValue: 'Engineer' (an option value).
Customization
- Tokens:
--mirio-bg,--mirio-fg,--mirio-border,--mirio-ring,--mirio-error,--mirio-muted-fg(placeholder and chevron),--mirio-radius. - CSS hooks:
[data-mirio="select"](the control),[data-mirio="select"][data-placeholder](nothing chosen yet),[data-mirio="select-wrap"](wrapper, e.g. to move or recolor the chevron). - For a custom listbox, build on
useField(name)from@trymirio/mirio/headlessand render your own control insideField.
Accessibility
Native semantics: the label's htmlFor targets the <select>, aria-describedby/aria-required/aria-invalid are set, and keyboard behavior is the platform's.