# Native Select

Browser-native select control with Bootstrap-compatible styling.

## Pure Owl component

```js
import { NativeSelect } from "@thebase/ui";
```

```base-ui
<div class="d-grid w-100 gap-2" style="max-width: 24rem">
  <Label for="'fruit'">Fruit</Label>
  <NativeSelect>
    <option value="'apple'">Apple</option>
    <option value="'banana'">Banana</option>
    <option value="'blueberry'">Blueberry</option>
    <option value="'pineapple'">Pineapple</option>
  </NativeSelect>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `NativeSelect` | `value` | `String` | optional |
| `NativeSelect` | `size` | `String` | optional |
| `NativeSelect` | `disabled` | `Boolean` | optional |
| `NativeSelect` | `className` | `String` | optional |
| `NativeSelect` | `ariaLabel` / `aria-label` | `String` | optional, accessible name for the control |
| `NativeSelect` | `id` | `String` | optional, e.g. for `Label`'s `for` |
| `NativeSelect` | `onChange` | `Function` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<select b-ui="native-select" id="role">
  <option>Owner</option>
  <option>Viewer</option>
</select>
```

Options: `b-att-size="sm|lg"`.

Accessibility: keep a visible label and avoid replacing native keyboard behavior.