Native Select

import {	NativeSelect,	NativeSelectOption,} from "@/components/ui/native-select";
export function NativeSelectDemo() {	return (		<NativeSelect>			<NativeSelectOption value="">Select status</NativeSelectOption>			<NativeSelectOption value="todo">Todo</NativeSelectOption>			<NativeSelectOption value="in-progress">In Progress</NativeSelectOption>			<NativeSelectOption value="done">Done</NativeSelectOption>			<NativeSelectOption value="cancelled">Cancelled</NativeSelectOption>		</NativeSelect>	);}

Installation

pnpm dlx shadcn@latest add @herocn/native-select

Usage

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

<NativeSelect>  <NativeSelectOption value="">Select a fruit</NativeSelectOption>  <NativeSelectOption value="apple">Apple</NativeSelectOption>  <NativeSelectOption value="banana">Banana</NativeSelectOption>  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption></NativeSelect>

Composition

Simple

Options placed directly under NativeSelect (no NativeSelectOptGroup).

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

With groups

Use NativeSelectOptGroup to organize options into categories.

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

Examples

Variants

Use the variant prop to switch between default and secondary styles.

import {	NativeSelect,	NativeSelectOption,} from "@/components/ui/native-select";
export function NativeSelectVariants() {	return (		<div className="flex w-full max-w-sm flex-col items-center justify-center gap-4">			<NativeSelect variant="default">				<NativeSelectOption value="">Default</NativeSelectOption>				<NativeSelectOption value="apple">Apple</NativeSelectOption>				<NativeSelectOption value="banana">Banana</NativeSelectOption>				<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>			</NativeSelect>			<NativeSelect variant="secondary">				<NativeSelectOption value="">Secondary</NativeSelectOption>				<NativeSelectOption value="apple">Apple</NativeSelectOption>				<NativeSelectOption value="banana">Banana</NativeSelectOption>				<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>			</NativeSelect>		</div>	);}

Groups

Use NativeSelectOptGroup to organize options into categories.

import {	NativeSelect,	NativeSelectOptGroup,	NativeSelectOption,} from "@/components/ui/native-select";
export function NativeSelectGroups() {	return (		<NativeSelect>			<NativeSelectOption value="">Select department</NativeSelectOption>			<NativeSelectOptGroup label="Engineering">				<NativeSelectOption value="frontend">Frontend</NativeSelectOption>				<NativeSelectOption value="backend">Backend</NativeSelectOption>				<NativeSelectOption value="devops">DevOps</NativeSelectOption>			</NativeSelectOptGroup>			<NativeSelectOptGroup label="Sales">				<NativeSelectOption value="sales-rep">Sales Rep</NativeSelectOption>				<NativeSelectOption value="account-manager">					Account Manager				</NativeSelectOption>				<NativeSelectOption value="sales-director">					Sales Director				</NativeSelectOption>			</NativeSelectOptGroup>			<NativeSelectOptGroup label="Operations">				<NativeSelectOption value="support">					Customer Support				</NativeSelectOption>				<NativeSelectOption value="product-manager">					Product Manager				</NativeSelectOption>				<NativeSelectOption value="ops-manager">					Operations Manager				</NativeSelectOption>			</NativeSelectOptGroup>		</NativeSelect>	);}

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

import {	NativeSelect,	NativeSelectOption,} from "@/components/ui/native-select";
export function NativeSelectDisabled() {	return (		<NativeSelect disabled>			<NativeSelectOption value="">Disabled</NativeSelectOption>			<NativeSelectOption value="apple">Apple</NativeSelectOption>			<NativeSelectOption value="banana">Banana</NativeSelectOption>			<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>		</NativeSelect>	);}

Invalid

Use aria-invalid to show validation errors on the native select element.

import {	NativeSelect,	NativeSelectOption,} from "@/components/ui/native-select";
export function NativeSelectInvalid() {	return (		<NativeSelect aria-invalid="true">			<NativeSelectOption value="">Error state</NativeSelectOption>			<NativeSelectOption value="apple">Apple</NativeSelectOption>			<NativeSelectOption value="banana">Banana</NativeSelectOption>			<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>		</NativeSelect>	);}

In a Surface

Use the Surface component to embed a native select in a styled container with the secondary variant.

Settings

Configure your application preferences.

import {	NativeSelect,	NativeSelectOption,} from "@/components/ui/native-select";import { Surface } from "@/components/ui/surface";
export function NativeSelectInSurface() {	return (		<Surface className="flex w-full max-w-sm flex-col gap-4 rounded-3xl p-6">			<h4 className="font-medium text-sm">Settings</h4>			<p className="text-muted-foreground text-sm">				Configure your application preferences.			</p>			<NativeSelect className="w-full" variant="secondary">				<NativeSelectOption value="">Select theme</NativeSelectOption>				<NativeSelectOption value="light">Light</NativeSelectOption>				<NativeSelectOption value="dark">Dark</NativeSelectOption>				<NativeSelectOption value="system">System</NativeSelectOption>			</NativeSelect>		</Surface>	);}

RTL

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import {	NativeSelect,	NativeSelectOption,} from "@/components/ui/native-select";
const translations: Translations = {	en: {		dir: "ltr",		values: {			placeholder: "Select status",			todo: "Todo",			inProgress: "In Progress",			done: "Done",			cancelled: "Cancelled",		},	},	ar: {		dir: "rtl",		values: {			placeholder: "اختر الحالة",			todo: "مهام",			inProgress: "قيد التنفيذ",			done: "منجز",			cancelled: "ملغي",		},	},	he: {		dir: "rtl",		values: {			placeholder: "בחר סטטוס",			todo: "לעשות",			inProgress: "בתהליך",			done: "הושלם",			cancelled: "בוטל",		},	},};
export function NativeSelectRtl() {	const { dir, t, language } = useTranslation(translations, "ar");
	return (		<div lang={language} dir={dir}>			<NativeSelect>				<NativeSelectOption value="">{t.placeholder}</NativeSelectOption>				<NativeSelectOption value="todo">{t.todo}</NativeSelectOption>				<NativeSelectOption value="in-progress">					{t.inProgress}				</NativeSelectOption>				<NativeSelectOption value="done">{t.done}</NativeSelectOption>				<NativeSelectOption value="cancelled">{t.cancelled}</NativeSelectOption>			</NativeSelect>		</div>	);}

API Reference

NativeSelect

The main select component that wraps the native HTML select element.

Prop	Type	Default
variant	`"default" \| "secondary"`	`"default"`
size	`"default" \| "sm"`	`"default"`
disabled	`boolean`	`false`

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`