Native Select
Styled native select element. Lightweight dropdown for short lists, mobile pickers, and forms that benefit from native a11y.
<NativeSelect className="w-full max-w-sm" defaultValue="mangosteen"> <NativeSelectOption value="mangosteen">Mangosteen</NativeSelectOption> <NativeSelectOption value="durian">Durian</NativeSelectOption> <NativeSelectOption value="rambutan">Rambutan</NativeSelectOption> <NativeSelectOption value="lychee">Lychee</NativeSelectOption> <NativeSelectOption value="longan">Longan</NativeSelectOption> <NativeSelectOption value="dragonfruit">Dragon fruit</NativeSelectOption></NativeSelect>Usage
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "@reva/ui";NativeSelect is a thin wrapper around the native <select> element. The visual surface matches Input — plain surface, hover border, focus ring — and shares the same sm / default / lg / xl size ramp. Reach for it when you want native dropdown UX (small footprint, mobile-optimised picker, native form behaviour, screen-reader baseline) and use Select when you need search, custom item rendering, multi-line items, sticky labels, or virtualised long lists.
Composition
Use the following composition to build a NativeSelect:
NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
└── NativeSelectOptionExamples
Sizes
Use size: sm (32px), default (40px), lg (44px), xl (48px). Heights and padding follow the same ladder as Input.
<VStack className="w-full max-w-sm" gap={3}> <NativeSelect defaultValue="" size="sm"> <NativeSelectOption disabled value="">Small</NativeSelectOption> <NativeSelectOption value="a">Option A</NativeSelectOption> <NativeSelectOption value="b">Option B</NativeSelectOption> </NativeSelect> <NativeSelect defaultValue="" size="default"> <NativeSelectOption disabled value="">Default</NativeSelectOption> <NativeSelectOption value="a">Option A</NativeSelectOption> <NativeSelectOption value="b">Option B</NativeSelectOption> </NativeSelect> <NativeSelect defaultValue="" size="lg"> <NativeSelectOption disabled value="">Large</NativeSelectOption> <NativeSelectOption value="a">Option A</NativeSelectOption> <NativeSelectOption value="b">Option B</NativeSelectOption> </NativeSelect> <NativeSelect defaultValue="" size="xl"> <NativeSelectOption disabled value="">Extra large</NativeSelectOption> <NativeSelectOption value="a">Option A</NativeSelectOption> <NativeSelectOption value="b">Option B</NativeSelectOption> </NativeSelect></VStack>With option groups
<NativeSelect className="w-full max-w-sm" defaultValue="usd"> <NativeSelectOptGroup label="Major"> <NativeSelectOption value="usd">USD — US Dollar</NativeSelectOption> <NativeSelectOption value="eur">EUR — Euro</NativeSelectOption> <NativeSelectOption value="gbp">GBP — Pound</NativeSelectOption> </NativeSelectOptGroup> <NativeSelectOptGroup label="Asia"> <NativeSelectOption value="jpy">JPY — Yen</NativeSelectOption> <NativeSelectOption value="hkd">HKD — Hong Kong Dollar</NativeSelectOption> <NativeSelectOption value="sgd">SGD — Singapore Dollar</NativeSelectOption> </NativeSelectOptGroup></NativeSelect>Disabled
<NativeSelect className="w-full max-w-sm" defaultValue="a" disabled> <NativeSelectOption value="a">Option A</NativeSelectOption> <NativeSelectOption value="b">Option B</NativeSelectOption></NativeSelect>Invalid
Use aria-invalid for error styling — matches the Input focus and error rings.
<NativeSelect aria-invalid className="w-full max-w-sm" defaultValue=""> <NativeSelectOption disabled value="">Pick one</NativeSelectOption> <NativeSelectOption value="a">Option A</NativeSelectOption> <NativeSelectOption value="b">Option B</NativeSelectOption></NativeSelect>Props
NativeSelect
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "xl" | "default" | Control height, padding, and font size. Aligned with Input. The native HTML size attribute is not exposed. |
| … | All other props are forwarded to the native <select> (name, value, defaultValue, onChange, disabled, required, multiple, aria-*). |
NativeSelectOption / NativeSelectOptGroup
Forward all props to the native <option> and <optgroup> elements. See MDN — <select>.
Label
Accessible label for form controls—most often paired with Checkbox. Built on the Radix UI Label primitive. See shadcn’s Label overview for patterns.
Number Input
Numeric field with parse / clamp, optional percentage suffix, and optional steppers. Composed from Input Group, so it reads identically to every other form field.