Native Select

Displays a styled native select element.

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/native-select/native-select";

Installation


$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/native-select.json

Usage

import {
  NativeSelect,
  NativeSelectOption,
  NativeSelectOptGroup,
} from "@/components/ui/native-select/native-select";

<NativeSelect defaultValue="apple">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelect>

Composition

Use the following composition to build a NativeSelect:

NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
    └── NativeSelectOption

Examples

Groups

Use NativeSelectOptGroup to group related options.

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/native-select/native-select";

Disabled

import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/native-select/native-select";

export function NativeSelectDisabled() {

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import * as React from "react";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";

API Reference

NativeSelect

The main select component that wraps the native HTML select element and accepts all of its props.

Prop	Type	Default
`className`	`string`	-

NativeSelectOption

Represents an individual option within the select.

Prop	Type	Default
`value`	`string`	-
`disabled`	`boolean`	`false`

NativeSelectOptGroup

Groups related options together for better organization.

Prop	Type	Default
`label`	`string`	-
`disabled`	`boolean`	`false`

Menubar Navigation Menu

On This Page

Installation Usage Composition Examples Groups Disabled RTL API Reference NativeSelect NativeSelectOption NativeSelectOptGroup

Edit this page Follow @shadcnlabs Join community