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 January 1, 1980

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

Installation

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>
  )
}

Examples

Size

RTL

API Reference

NativeSelect

API reference: shadcn/ui NativeSelect .