Docs
Native Select

Native Select

Native select element.

Installation

pnpm dlx cross-env REGISTRY_URL=https://ui-x.junwen-k.dev/r pnpm dlx shadcn@latest add native-select

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

Form

You can manage email addresses in your email settings.

Responsive Select

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

KbdPassword Input