Native Select · paneui

Region

Installation

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

Usage

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

<NativeSelect defaultValue="name">
  <NativeSelectOption value="name">Name</NativeSelectOption>
  <NativeSelectOption value="date">Date</NativeSelectOption>
</NativeSelect>

Examples

Sizes

When to use

Prefer it to Select on touch devices, in long forms and wherever the platform picker helps. Use Select when options need icons or custom rows.

API Reference

NativeSelect

className goes on the wrapper, so width utilities apply to the field. Also accepts every prop of select.

size= "default": "xs" | "sm" | "default" | "lg"; Height (24 / 28 / 32 / 36px). Follows a sized Field.
htmlSize: number; The native size attribute.

Prop	Type	Default	Description
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height (24 / 28 / 32 / 36px). Follows a sized `Field`.
htmlSize	number	—	The native `size` attribute.

NativeSelectOption

Also accepts every prop of option.

NativeSelectOptGroup

Also accepts every prop of optgroup.