Native Select
A select using the browser's native option picker.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Native Select
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/native-select.json'Usage
A complete example using the installed component and hook paths.
Native Select usage
"use client";import { useId } from "react";import { Label } from "@/components/ui/label";import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";function NativeSelectPreview() { const id = useId(); return ( <div className="w-full max-w-64 space-y-2"> <Label htmlFor={id}>Size</Label> <NativeSelect id={id} defaultValue="medium"> <NativeSelectOption value="small">Small</NativeSelectOption> <NativeSelectOption value="medium">Medium</NativeSelectOption> <NativeSelectOption value="large">Large</NativeSelectOption> </NativeSelect> </div> );}export default function Demo() { return <NativeSelectPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
NativeSelect
NativeSelect props
NativeSelectProps & { sound?: boolean }- size
- "default"
- sound
- true
NativeSelectOptGroup
NativeSelectOptGroup props
React.ComponentProps<"optgroup">NativeSelectOption
NativeSelectOption props
React.ComponentProps<"option">