Native Select

A styled native HTML select — height h-8 by default. Prefer this for mobile OS pickers and simple forms; use the custom Select when you need rich menu chrome.

Basic

A styled native <select> with a chevron affordance.

Installation

CLI

npx @sonojs/ui@latest add native-select

Also needsnpm i lucide-react

Composition

structure

NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
    └── NativeSelectOption

Usage

native-select.tsx

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

export function Example() {
  return (
    <NativeSelect>
      <NativeSelectOption value="">Select a fruit</NativeSelectOption>
      <NativeSelectOption value="apple">Apple</NativeSelectOption>
      <NativeSelectOption value="banana">Banana</NativeSelectOption>
    </NativeSelect>
  )
}

Props

Prop	Type	Default	Description
size	"default" · "sm"	"default"	Control height — default `h-8`, sm `h-7`.
disabled	boolean	false	Disables the native select.
aria-invalid	boolean	—	Marks the control invalid and applies destructive ring.
label	string	—	On `NativeSelectOptGroup` — group heading.
className	string	—	Merge extra Tailwind classes on the select.