Native Select

A styled native select with a chevron. Uses the OS picker and works inside Field.

Installation

npx shadcn@latest add @fujin/native-select

Usage

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

<Field name="sort">
  <FieldLabel>Sort by</FieldLabel>
  <NativeSelect defaultValue="newest">
    <NativeSelectOption value="newest">Newest</NativeSelectOption>
    <NativeSelectOption value="oldest">Oldest</NativeSelectOption>
  </NativeSelect>
</Field>

Placeholder

placeholder does nothing on a <select>. Use a first option with an empty value, disabled so it cannot be re-picked, and make the field required:

<NativeSelect required defaultValue="">
  <NativeSelectOption value="" disabled>
    Select a country
  </NativeSelectOption>
  ...
</NativeSelect>

Native select uses the platform picker, which is the most usable option on touch devices and needs no JavaScript to submit. Reach for select when options need icons or descriptions, and combobox when the list needs search.

What's different from shadcn/ui

className goes on the wrapper, which is full width by default. The <select> always fills it, so className="w-48" sizes the whole control.
It renders through Base UI's Field.Control, so inside <Field> the label, description, error and aria-invalid are wired up automatically.

API Reference

Prop

Type

Every other <select> attribute is forwarded (except the native size). Field wiring comes from Base UI's Field.Control.