Command Palette

Search for a command to run...

Native Select

Native select element.

Loading...

Installation

pnpm dlx shadcn@latest add https://ui-x.junwen-k.dev/r/native-select.json

Usage

import {
  NativeSelect,
  NativeSelectOption,
  NativeSelectPlaceholder,
} from "@/components/ui/native-select";
<NativeSelect>
  <NativeSelectPlaceholder>Select a fruit</NativeSelectPlaceholder>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="grapes">Grapes</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Examples

Default

Loading...

Form

Loading...

Responsive Select

You can create a responsive select by using the <Select /> on desktop and the <NativeSelect /> on mobile.

Loading...