# Native Select

- Page: <https://kznlabs.github.io/labsUI/components/native-select>

## Native Select (`native-select`, component)

A real <select> with option groups: native picker on phones, no-JS forms, native required validation. Where customizable select is supported (appearance: base-select), the open list gets the menu look.

- Install: `npx @kznlabs/labsui add native-select`
- Docs: <https://kznlabs.github.io/labsUI/components/native-select>
- Brings: field, input, label, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<NativeSelect>` (+ <select> props): A real <select>: native picker on phones, works in forms without JS, native validation
(`required` + :user-invalid). Where the browser supports customizable select
(`appearance: base-select`), the open list gets the menu look; elsewhere it stays native.
Use `Select` instead when options need icons or custom rendering.
- `<NativeSelectGroup>` (+ <optgroup> props): A labeled group of options (<optgroup>).
  - `label: string`: Group heading in the list.
- `<NativeSelectOption>` (+ <option> props)

### Usage

```tsx
<NativeSelect name="zone" required><NativeSelectGroup label="Europe"><NativeSelectOption value="Europe/Warsaw">Warsaw</NativeSelectOption></NativeSelectGroup></NativeSelect>
```

### Example: timezone-field.tsx

```tsx
import { Field } from "@/components/ui/field";
import { NativeSelect, NativeSelectGroup, NativeSelectOption } from "@/components/ui/native-select";

export function TimezoneField() {
  return (
    <Field label="Timezone" required>
      <NativeSelect name="zone" defaultValue="">
        <NativeSelectOption value="" disabled>Pick a timezone</NativeSelectOption>
        <NativeSelectGroup label="Europe">
          <NativeSelectOption value="Europe/Warsaw">Warsaw (CET)</NativeSelectOption>
          <NativeSelectOption value="Europe/London">London (GMT)</NativeSelectOption>
        </NativeSelectGroup>
      </NativeSelect>
    </Field>
  );
}
```