Shadcn Select: Styled, Accessible Select Menus for React Forms
The shadcn select replaces the browser's rigid native dropdown with a fully styleable listbox: a trigger button opens a positioned panel of options with keyboard navigation, typeahead, and proper ARIA semantics. Built on Radix UI and themed with Tailwind CSS, this react select component keeps every project's forms consistent across browsers and platforms.
This page brings together 15 select examples to copy and paste, including selects with placeholders, icons, helper text and error states, grouped options, overlapping labels, status indicators, avatars and portraits, and searchable variants with and without action buttons. All examples are typed TypeScript components for Next.js and Vite.
Choosing the Shadcn Select
A select is the right control when users pick exactly one option from a known list of roughly five to fifteen items: country, role, status, category, or time zone presets. The closed trigger keeps forms compact, and the options reveal themselves on demand.
Fewer than five options usually read better as a radio group, where every choice is visible at once. Beyond fifteen or so, scanning breaks down and a searchable combobox or autocomplete field becomes the kinder pattern, which is why this page also includes select with search variants.
Design guidelines
- Always pair with a label: A placeholder disappears after selection, so a persistent label above or overlapping the trigger keeps the field identifiable.
- Preselect safe defaults only: Default to a value when one option covers most users, and use a placeholder when the choice genuinely matters.
- Group long lists: Option groups with headings, like the grouped variant here, help users scan related choices such as time zones by region.
- Show errors at the field: Mark the trigger with the error state and place the message directly below, as the error variant demonstrates.
- Enrich options carefully: Icons, avatars, and descriptions aid recognition, but keep the selected-value display compact inside the trigger.
Advantages over the native select
- Full option styling: Options can carry icons, avatars, descriptions, and status dots, none of which native option elements allow.
- Consistent cross-platform look: The dropdown panel renders identically on every OS instead of falling back to system widgets.
- Typeahead and keyboard control: Typing jumps to matching options and arrow keys navigate, mirroring native behavior users rely on.
- Form submission preserved: A hidden native select keeps the component working with FormData and server actions.
Pairing with other components
Selects slot into a field alongside labels and helper text, and sit next to input controls in nearly every settings form. The status select variant pairs naturally with a badge to echo the chosen state elsewhere in the UI, and table toolbars often use a compact select for page size beside pagination.
When options must be searchable or user-creatable, step up to the combobox instead. For maximum performance on simple mobile forms, the native select remains a valid lightweight alternative.
Primitive support
The component builds on the Radix UI Select primitive, which handles the listbox semantics, typeahead, scroll buttons, and value management. Installation and composition details are in the shadcn select docs.
Base UI's Select component covers the same ground with its own anatomy, so the variants on this page can be rebuilt on Base UI while keeping the Tailwind CSS look identical.