Native Select

NativeSelect is a native <select> with glass-ui form styling. It keeps the browser and OS picker behavior on purpose, so this component should be used when you want native accessibility and platform-consistent interaction instead of a fully custom dropdown.

Installation

Usage

import { NativeGroup, NativeOption, NativeSelect } from "@/components/ui/native-select"

export default function App() {
  return (
    <NativeSelect defaultValue="frontend" variant="soft">
      <NativeGroup label="Engineering">
        <NativeOption value="frontend">Frontend</NativeOption>
          <NativeOption value="backend">Backend</NativeOption>
        </NativeGroup>

        <NativeGroup label="Product">
          <NativeOption value="design">Design</NativeOption>
        <NativeOption value="pm">Product Manager</NativeOption>
      </NativeGroup>
    </NativeSelect>
  )
}

import { NativeGroup, NativeOption, NativeSelect } from "@/components/ui/native-select"

export default function App() {
  return (
    <NativeSelect defaultValue="frontend" variant="soft">
      <NativeGroup label="Engineering">
        <NativeOption value="frontend">Frontend</NativeOption>
          <NativeOption value="backend">Backend</NativeOption>
        </NativeGroup>

        <NativeGroup label="Product">
          <NativeOption value="design">Design</NativeOption>
        <NativeOption value="pm">Product Manager</NativeOption>
      </NativeGroup>
    </NativeSelect>
  )
}

Examples

Canonical Field Composition

Use Field, Label, and FieldDescription when the select belongs to one logical form field.

Groups

Use NativeGroup to organize longer native option lists without leaving the native picker behavior.

Error

Glass UI selects do not use an error prop. Set aria-invalid="true" directly, or set invalid on the surrounding Field when you want the field to propagate it.

Disabled

The disabled state is fully native and keeps the same opacity behavior as the rest of the form controls.

Styling

NativeSelect follows the same prop-first direction as Input and Textarea, but it keeps native select semantics first. Reach for variant and uiSize before custom classes, then use className as an escape hatch. When used inside Field, the actual <select> receives the generated id and merged descriptions even though it renders inside a wrapper div.

/* Variants */

<NativeSelect variant="default" />
<NativeSelect variant="soft" />
<NativeSelect variant="strong" />
<NativeSelect variant="transparent" />

/* UI sizes (defaults to md) */

<NativeSelect uiSize="sm" />
<NativeSelect uiSize="md" />
<NativeSelect uiSize="lg" />

/* Native select behavior stays available */

<NativeSelect size={6} />
<NativeSelect multiple />
<NativeSelect aria-invalid="true" />

/* Escape hatch */

<NativeSelect className="max-w-xs" />

<NativeSelect defaultValue="frontend" variant="soft">
  <NativeGroup label="Engineering">
    <NativeOption value="frontend">Frontend</NativeOption>
    <NativeOption value="backend">Backend</NativeOption>
  </NativeGroup>
</NativeSelect>

/* Variants */

<NativeSelect variant="default" />
<NativeSelect variant="soft" />
<NativeSelect variant="strong" />
<NativeSelect variant="transparent" />

/* UI sizes (defaults to md) */

<NativeSelect uiSize="sm" />
<NativeSelect uiSize="md" />
<NativeSelect uiSize="lg" />

/* Native select behavior stays available */

<NativeSelect size={6} />
<NativeSelect multiple />
<NativeSelect aria-invalid="true" />

/* Escape hatch */

<NativeSelect className="max-w-xs" />

<NativeSelect defaultValue="frontend" variant="soft">
  <NativeGroup label="Engineering">
    <NativeOption value="frontend">Frontend</NativeOption>
    <NativeOption value="backend">Backend</NativeOption>
  </NativeGroup>
</NativeSelect>

API Reference

NativeSelect also accepts the full native <select> API, including multiple, size, name, value, and onChange. NativeGroup and NativeOption stay thin wrappers around <optgroup> and <option>.