# NativeSelect

> Styled native `<select>` (keeps the system picker on touch devices).

Source: https://ui.jcsoftdev.com/docs/components/native-select

Styled native `<select>` (keeps the system picker on touch devices). It extends the existing
`Select` styling with a data-driven `options` API, optgroups, a placeholder and a compact size.

## Import

```ts
import { NativeSelect } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/native-select`.

## Usage

```tsx
<NativeSelect
  options={options}
  placeholder="Elige un barbero"
  aria-label="Barbero"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(NativeSelectOption \| NativeSelectGroup)[]` |  | Data-driven alternative to `<option>` children; groups render as `<optgroup>`. |
| `placeholder` | `string` |  | Disabled first option shown while nothing is chosen. |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `invalid` | `boolean` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-nativeselect--default)
- [Small](/storybook/?path=/story/forms-nativeselect--small)
- [Invalid](/storybook/?path=/story/forms-nativeselect--invalid)
- [Narrow](/storybook/?path=/story/forms-nativeselect--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-nativeselect--brutal-preset)

## Source

`packages/ui/src/forms/native-select/native-select.tsx`