Shadcn Native Select: Styled HTML Select for React Forms
Native Select styles the browser's built-in select element to match shadcn/ui, giving you a react select component with zero JavaScript overhead. It is a custom shadcn style component built with Tailwind CSS: the dropdown list itself stays native, which means perfect mobile pickers, flawless keyboard support, and full compatibility with plain HTML forms and server actions in Next.js.
Here you will find nine copy-paste native select examples covering the states real forms need: a default field, placeholder handling, an icon variant, helper text, error styling, a required select, grouped options, and two floating label treatments with overlapping and inset labels. All examples ship as TypeScript components.
What you get
- Styled native element: A select that keeps the OS dropdown while matching shadcn borders, focus rings, and typography.
- Placeholder pattern: A disabled hidden first option that behaves like placeholder text until a value is chosen.
- Icon and helper text: Variants with a leading icon and descriptive text below the field for extra context.
- Validation states: Error styling with a message, plus a required variant with proper labeling.
- Option groups: optgroup support for organizing long lists such as countries by region.
- Floating labels: Overlapping and inset label treatments for denser, modern form layouts.
Implementation tips
- Style the wrapper, not the popup: Browsers control the open dropdown list, so invest styling effort in the closed field and its chevron.
- Fake the placeholder correctly: Use a first option with an empty value, disabled and hidden, and mark the select required so validation catches the unset state.
- Replace the default arrow: Apply appearance-none and position your own chevron icon so the field matches other inputs pixel for pixel.
- Use optgroup for long lists: Grouped options are natively accessible and cost nothing, unlike custom grouped listboxes.
- Reach for it in forms first: Native selects submit with standard form posts and server actions without any hidden input tricks.
Where it fits in a dashboard
Native selects are the pragmatic choice for the many small choices scattered through an admin app: country and timezone pickers in settings, per-page counts on tables, status fields on edit forms, and any dropdown inside a form that posts to the server. On touch devices they open the platform picker, which users already know how to operate.
They are also the resilient option. With no portal, no positioning logic, and no client JavaScript, a native select cannot clip inside overflow containers or misplace its popup, which makes it a safe default in dense layouts.
Related components and patterns
When you need styled options, multi-column layouts, or option previews inside the open list, the custom Select component takes over with a fully rendered popup. For long lists that benefit from typing to filter, a Combobox or Autocomplete is the better tool.
In form layouts, pair the native select with the Field wrapper for consistent labels and messages, and with Input fields that share the same heights and focus styles. Complete form sections are collected in Blocks.
Library support
There is no primitive underneath this component by design. Native Select is a custom shadcn style component that applies Tailwind CSS classes to the real select element, so it has no dependency on Radix UI or Base UI while remaining equally at home in projects built on either. If you later need a fully custom popup, you can swap in the primitive-based Select without changing your form's data flow.