Native Select

A styled wrapper around the native HTML <select> element — lightweight, mobile-friendly, and form-friendly. Distinct from the Radix-based Select.

Install

npx shadcn@latest add https://atomx.acau.net/r/native-select.json

Usage

Native Select is a styled wrapper around the native HTML <select> element. It is distinct from the Radix-based Select component. Use this when:

• You need the OS-native option picker (mobile keyboards, accessibility tooling, form auto-fill).
• You're building a plain HTML form and want native form submission to "just work" without controlled state.
• You want the smallest possible JavaScript footprint — no Radix runtime.

Reach for Select instead when you need rich custom content inside options (icons, multi-line labels), portal-rendered dropdowns, or fully styled options.

NativeSelect accepts all standard <select> props plus a size of "default" or "sm". Use NativeSelectOption for options and NativeSelectOptGroup to group related options.

<NativeSelect defaultValue="banana">
  <NativeSelectOptGroup label="Fruits">
    <NativeSelectOption value="apple">Apple</NativeSelectOption>
    <NativeSelectOption value="banana">Banana</NativeSelectOption>
    <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
  </NativeSelectOptGroup>
</NativeSelect>

Preview

Default

Disabled

Props

NativeSelect extends <select> except for the native size attribute, which is replaced by the visual size variant below.

NativeSelectOption extends <option>. NativeSelectOptGroup extends <optgroup> — use the label prop to title each group.