Glass UI

Native Select

Native HTML select styled to match Input and the glass form controls, without becoming a custom dropdown.

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

npx @glass-ui-kit/cli add select

Usage

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


export default function App() {
  return (
    <NativeSelect defaultValue="frontend">
      <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

Groups

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

Error

Use the same error treatment as the rest of the form controls with aria-invalid and destructive border/ring classes.

Please choose a department.

Disabled

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

Styling & API

NativeSelect accepts the same props as a native <select>. NativeGroup and NativeOption are thin wrappers around <optgroup> and <option>.

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