Native Select

import { InfoIcon } from "lucide-react"

<Callout variant="info" icon={<InfoIcon className="translate-y-[3px]!" />}> For a styled select component, see the Select component. </Callout>

Installation

npx shadcn@latest add native-select

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="native-select" title="components/ui/native-select.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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>

Examples

Groups

Use NativeSelectOptGroup to organize options into categories.

Disabled

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

Invalid

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

Native Select vs Select

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

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="base-nova" name="native-select-rtl" direction="rtl" />

API Reference

NativeSelect

The main select component that wraps the native HTML select element.

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

NativeSelectOption

Represents an individual option within the select.

NativeSelectOptGroup

Groups related options together for better organization.

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