Native select
The browser's own select in Input's well, with zeroUI's chevron.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/native-selectExamples
Districts in two groups
import { Field, FieldLabel } from "@/components/zero/field";import { NativeSelect, NativeSelectOptGroup, NativeSelectOption,} from "@/components/zero/native-select";export default function NativeSelectDistrict() { return ( <Field className="w-full max-w-xs"> <FieldLabel>District</FieldLabel> <NativeSelect defaultValue="harbor"> <NativeSelectOptGroup label="East"> <NativeSelectOption value="harbor">Harbor</NativeSelectOption> <NativeSelectOption value="rail-yards">Rail yards</NativeSelectOption> </NativeSelectOptGroup> <NativeSelectOptGroup label="West"> <NativeSelectOption value="old-market">Old market</NativeSelectOption> <NativeSelectOption value="canal-docks"> Canal docks </NativeSelectOption> </NativeSelectOptGroup> </NativeSelect> </Field> );}Behaviour
Use it where a form must work without JavaScript or where the phone's own picker is wanted. Its list is drawn by the browser, so it does not take zeroUI's look; Select does.
Props
NativeSelect
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Input's heights. |
| cut | "end" | "start" | "both" | "none" | "end" | Which edges are cut on the slant. |