Shadcn.io is not affiliated with official shadcn/ui
Shadcn Native Select
React native select for mobile pickers and HTML forms. Built with TypeScript and Tailwind CSS for Next.js using Base UI — option groups and validation states.
A native select is a styled <select>. Click it and the browser opens its own list — on a phone that's the system picker. Use it when the options are plain text and the value should post with the form.
Looking for a neobrutalism version for shadcn?
Same native select, thicker borders. The NeoBrutalism native select is the kit if you want that look.
Usage
import {
NativeSelect,
NativeSelectOptGroup,
NativeSelectOption,
} from "@/components/ui/native-select"<NativeSelect>
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
<NativeSelectOption value="apple">Button</NativeSelectOption>
<NativeSelectOption value="banana">CLI</NativeSelectOption>
<NativeSelectOption value="blueberry">Registry</NativeSelectOption>
<NativeSelectOption value="pineapple">Docs</NativeSelectOption>
</NativeSelect>size is sm or default. It replaces the native HTML size attribute.
Composition
Groups
NativeSelectOptGroup is a native <optgroup>. Screen readers announce the label as you arrow through.
Disabled
disabled greys the wrapper, chevron included. The control stays in the form.
Invalid
aria-invalid turns the border and ring destructive. Put data-invalid on Field so the label matches.
RTL
Wrap with DirectionProvider and dir="rtl". Copy stays Arabic. The chevron stays on the end.
API
Prop
Type
NativeSelectOption
Prop
Type
NativeSelectOptGroup
Prop
Type
Keyboard
| Key | Action |
|---|---|
Space / Alt+ArrowDown | Open the list |
ArrowUp / ArrowDown | Previous / next option |
| Letter keys | Jump to a matching option |
Enter | Confirm the focused option |
Escape | Close the list |
Tab | Leave the control |
Notes
The open list is the OS picker
You cannot style options. The popup is the platform list — fonts, spacing, and hover are not yours. Need flags, avatars, or a custom row? Use Select.
An empty-value first option plus required is the placeholder. The browser blocks submit until someone picks a real value.
With other components
Label, description, error
LabelName the control
FormPosts with FormData
Button GroupCompact filter bar
InputSame form row
CardSettings on a card
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Message Scroller
React chat scroller for AI threads and support transcripts. Built with TypeScript and Tailwind CSS for Next.js using Base UI — anchors turns, follows streams.
Navigation Menu
React navigation menu for site headers with dropdowns and mega menus. Built with TypeScript and Tailwind CSS for Next.js using Base UI — hover delays and keyboard nav.