Native Select

A styled native <select> element for choosing a single value — useful when you want native mobile picker behavior instead of Select's custom popup.

Last updated August 7, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

The dropdown chevron and padding use logical start/end properties, so it sits on the correct side in RTL without an override

Overview

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
 
export function NativeSelectDemoExample() {
  return (
    <NativeSelect defaultValue="next" aria-label="Framework">
      <NativeSelectOption value="next">Next.js</NativeSelectOption>
      <NativeSelectOption value="svelte">SvelteKit</NativeSelectOption>
      <NativeSelectOption value="nuxt">Nuxt.js</NativeSelectOption>
    </NativeSelect>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/native-select.json

Usage

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
 
export function Example() {
  return (
    <NativeSelect defaultValue="next">
      <NativeSelectOption value="next">Next.js</NativeSelectOption>
      <NativeSelectOption value="svelte">SvelteKit</NativeSelectOption>
    </NativeSelect>
  )
}

Size

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
 
export function NativeSelectSizeExample() {
  return (
    <div className="flex flex-col gap-3">
      <NativeSelect size="sm" defaultValue="next" aria-label="Framework">
        <NativeSelectOption value="next">Next.js</NativeSelectOption>
        <NativeSelectOption value="svelte">SvelteKit</NativeSelectOption>
      </NativeSelect>
      <NativeSelect defaultValue="next" aria-label="Framework">
        <NativeSelectOption value="next">Next.js</NativeSelectOption>
        <NativeSelectOption value="svelte">SvelteKit</NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

RTL

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select"
 
export function NativeSelectRtlExample() {
  return (
    <NativeSelect defaultValue="tehran" aria-label="شهر">
      <NativeSelectOption value="tehran">تهران</NativeSelectOption>
      <NativeSelectOption value="mashhad">مشهد</NativeSelectOption>
      <NativeSelectOption value="isfahan">اصفهان</NativeSelectOption>
    </NativeSelect>
  )
}

API Reference

NativeSelect

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	The size of the select.
disabled	boolean	false	Prevents interaction with the select.

Edit this page on GitHub

PreviousInput OTP NextProgress