Native Select

A styled native HTML select element with consistent design system integration.

Radix UI Base UI

For a styled select component, see the Select component.

Installation

Menubar Navigation Menu

On This Page

Installation Usage Examples Groups Disabled Invalid Native Select vs Select API Reference NativeSelect NativeSelectOption NativeSelectOptGroup

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add native-select

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

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Use NativeSelectOptGroup to organize options into categories.

Add the disabled prop to the NativeSelect component to disable the select.

Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
Use Select for custom styling, animations, or complex interactions.

<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

Prop	Type	Default
`value`	`string`
`disabled`	`boolean`	`false`

Prop	Type	Default
`label`	`string`
`disabled`	`boolean`	`false`

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>

import {
  NativeSelect,
  NativeSelectOption,

import {
  NativeSelect,
  NativeSelectOption,

import {
  NativeSelect,
  NativeSelectOption,

import {
  NativeSelect,
  NativeSelectOptGroup,