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>
	);
}

Sizes

Use the size prop to toggle between default and sm.

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

export function NativeSelectSizes() {
	return (
		<div className="flex w-full max-w-sm flex-col items-center justify-center gap-4">
			<NativeSelect size="default">
				<NativeSelectOption value="">Default</NativeSelectOption>
				<NativeSelectOption value="apple">Apple</NativeSelectOption>
				<NativeSelectOption value="banana">Banana</NativeSelectOption>
				<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
			</NativeSelect>
			<NativeSelect size="sm">
				<NativeSelectOption value="">Small</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`