Native Select
shadcn/ui
v4 only
Styled native HTML select. Use when Radix Select is overkill — mobile-first or server-rendered forms.
@/components/ui/native-selectStates
| State | Preview | Token |
|---|---|---|
| Default | border-input bg-background — same as Input | |
| Disabled | opacity-50 cursor-not-allowed |
Patterns
In context — filter bar
Tickets
NativeSelect at h-7 aligns with toolbar density — uses browser-native dropdown
NativeSelect vs Select (Radix)
| NativeSelect | Select (Radix) | |
|---|---|---|
| Dropdown | Browser native — OS-styled | Custom Radix popover — consistent across OS |
| Custom items | Text only — no icons or badges | Any React content inside SelectItem |
| Mobile | Native iOS/Android UX — familiar | Custom — may feel foreign on mobile |
| Server forms | Works without JS | Requires JS |
| Best for | Filters, compact toolbars, mobile-first | Status, priority, role — when custom UI matters |
Sub-components + Props
| Component | Role |
|---|---|
| NativeSelect | Styled <select> wrapper — same height/border/focus as Input |
| NativeSelectOption | Single <option> — value + label text |
| NativeSelectOptGroup | <optgroup> — groups options under a non-selectable label |
| Prop | Type | Description |
|---|---|---|
| defaultValue | string | Initially selected value (uncontrolled) |
| value | string | Controlled selected value |
| onChange | function | React.ChangeEventHandler<HTMLSelectElement> |
| disabled | boolean | Prevents selection, reduces opacity |
| size | "sm" | "default" | Height — default 36px, sm 32px |
On this page