Native Select

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.

npx @kznlabs/labsui add native-select

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>  );}

<NativeSelect>

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.

Also accepts every <select> prop (none of its own).

<NativeSelectGroup>

A labeled group of options (<optgroup>).

label*
string
Group heading in the list.

Prop	Type	Default
`label*` Group heading in the list.	`string`	—

Also accepts every <optgroup> prop.

<NativeSelectOption>

Also accepts every <option> prop (none of its own).

* required. Every component also takes className.