---
title: Select
description: A styled native select for dropdown fields.
preview: select
---
# Select

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
<!-- preview: select -->

## Usage
```tsx
// { 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](/docs/components/input.md#variants-and-states). 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/headless` and render your own control inside `Field`.

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

## Related
[Choice](/docs/components/choice.md), [Field](/docs/components/field.md), [Schema: field types](/docs/schema.md)