Command Palette

Search for a command to run...

GitHubGitHub

Native Select

Native select element.

Open in Open in v0

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

Open in Open in v0

Form

Open in Open in v0

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.

Open in Open in v0
Kbd

Displays which key or combination of keys performs a given action.

Password Input

Password Input provides a way for the user to securely enter a password, with the ability to toggle the visibility of the password.