# NativeSelect

The browser's own select, styled as a control. Native pickers on phones, no script needed.

```ehtml Example
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@elements/ui/native-select";

<NativeSelect value={form.status} placeholder="Select status">
  <option value="todo">Todo</option>
  <option value="done">Done</option>
</NativeSelect>

<NativeSelect value={form.team} options={[{ value: "fe", label: "Frontend", group: "Engineering" }]} />
```

## Parts

| Part | What it is |
|---|---|
| `.native-select` | The wrapper: the select and the chevron stacked in one grid cell. |
| `.native-select-control` | The `<select>`. |
| `.native-select-icon` | The chevron; ignores the pointer. |

## Attributes

### NativeSelect

| Attribute | Type | Default | Description |
|---|---|---|---|
| `value` | `string` (two-way) | `""` | The selected value. |
| `options` | `{ value: string; label: string; disabled?: boolean; group?: string }[]` | `[]` | Options as data. Ones with a group render in an optgroup. |
| `placeholder` | `string` | `""` | An empty first option, dimmed while selected. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Control height and type size. |
| `name` | `string` | `""` | Form field name. |
| `invalid` | `boolean` | `false` | aria-invalid and the danger border. |
| `disabled` | `boolean` | `false` | Native disabled. |
| `required` | `boolean` | `false` | An empty value blocks the form. |
| `block` | `boolean` | `false` | Full width instead of the longest option's width. |
| `class` | `string` | `""` | Extra classes on the wrapper. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Attributes for the `<select>`: id, autocomplete, aria-\*. |
| `onchange` | `(e: Event) => void` | `() => {}` | A new option was chosen. |

### NativeSelectOption

| Attribute | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | (required) | The option's value. |
| `disabled` | `boolean` | `false` | Not selectable. |

### NativeSelectOptGroup

| Attribute | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | (required) | The group heading. |
| `disabled` | `boolean` | `false` | Disables every option in the group. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `default` | `NativeSelect` | `<option>`, `<NativeSelectOption>` or `<NativeSelectOptGroup>`. |

## Keyboard

| Keys | Action |
|---|---|
| `Space / Enter / Alt + ArrowDown` | Opens the list (platform dependent). |
| `ArrowUp / ArrowDown` | Changes the value. |
| `A-Z` | Jumps to the next option starting with that letter. |
| `Escape` | Closes the list. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-size` | `"sm" \| "md" \| "lg"` | wrapper |
| `data-disabled` | present while disabled | wrapper |
| `data-invalid` | present while invalid | select |

## Accessibility

- A native `<select>`: screen readers, keyboards and phone pickers get the platform's own control.
- invalid sets aria-invalid; inside a Field the field wires the label and messages.
- The chevron is decorative and aria-hidden.

## See also

- [ButtonGroup](button-group): Related buttons, or an input and its buttons, joined into one control.
- [Input](input): A native text input in the theme's control chrome, with a two-way value.
- [InputGroup](input-group): An Input or Textarea with icons, text and buttons inside one box.
- [Textarea](textarea): A native multi-line input that grows with its content, between rows and maxRows.
- [Field](field): A label, a control, a description and an error wired together, with native validation that never moves the layout.
- [Label](label): A native label for a control, which dims when the control is disabled.