DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
  1. Components
  3. Select
MarkdownPro 12 blocks

Shadcn Select

Browse 33 production-ready shadcn select components for customizable dropdowns, multi-select, and searchable option lists. Select is compatible with Radix UI and Base UI composition and fully aligned with Shadcn Create so radius, colors, and typography match your design tokens.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

  • Form fields that pick one value from a short fixed list, such as a fruit, timezone, country or size
  • Pickers whose options carry a status dot, badge, avatar, flag, icon or one line description
  • Toolbar filters and property pickers, such as status, priority, access level or assignee

When not to use

  • A long list the user wants to search by typing part of a name: use the Combobox component
  • A plain form field that should open the phone or browser's own picker: use the Native Select component
  • Options nested in levels, such as a category and then its subcategories: use the Cascader component

Agent notes

  • Pass alignItemWithTrigger false on the base twin or position popper on radix to open the list below the trigger, not over it
  • With no children, base SelectValue prints a string value raw unless Select gets items; radix SelectValue mirrors the chosen SelectItem
  • Base SelectItem can take a whole object as value, matched to defaultValue by reference; radix values must be non-empty strings
Markdownhttps://web.dev.reui.io/components/select.md
MCPget_component("select")
Installnpx shadcn@latest add select
Full index for agents:llms.txtReUI MCP setup

Shadcn Select: Customizable Dropdowns and Option Lists

Shadcn Select is a styleable dropdown component built on Radix UI for single and multi-option selection. Unlike native <select>, it allows custom styling via Tailwind, animations, and rich option content (icons, badges) while maintaining full keyboard and accessibility support.

It displays a trigger button that opens a dropdown menu, with typeahead search, filtering, and disabled state support. Fully compatible with Shadcn Create style tokens for consistent theming.

ReUI lists select components inside forms, filters, and settings panels so you evaluate when to use Select vs. Radio Group (fewer options), Combobox (searchable large lists), and Native Select (mobile-friendly). The sections below explain what the component is, why it matters, key features, and integration guidance.

What is Shadcn Select?

A select component is a dropdown menu for choosing one option from a list. Shadcn Select wraps Radix UI Select to provide custom styling, animations, and rich content support (icons, labels, groups) while maintaining WCAG 2.1 AA keyboard and screen-reader accessibility.

Components here show basic single-select, optionally searchable with icons, grouped options (e.g., by category), disabled options, and multi-select variations. They help you decide between Select, native <select>, and Combobox based on option count and whether searching is needed.

Why Use Shadcn Select?

Teams use Select when they need a dropdown that looks and feels consistent with their design system. Radix UI Select provides keyboard accessibility and mobile support out of the box, while custom styling makes it a strong alternative to native <select>.

The components on this page show the trade-offs: native <select> is fastest and mobile-optimized; Shadcn Select offers design flexibility and animations; Combobox adds search for large lists.

Shadcn Select Features

  • Customizable Styling. Fully styled with Tailwind CSS; set colors, sizes, and animations to match your design tokens. No CSS-in-JS or theme overrides needed.
  • Radix UI Foundation. Built on Radix UI Select for proven keyboard behavior, focus management, and screen-reader support that matches WAI-ARIA guidance.
  • Grouped Options. Organize options into logical groups (e.g., 'Colors', 'Sizes') with SelectGroup and SelectLabel for better scannability in long lists.
  • Rich Option Content. Add icons (Lucide), badges, or custom markup to options for visual clarity; pair with Shadcn Badge for status or counts.
  • Disabled and Read-Only. Disable individual options or the entire select; show visual feedback so users understand why an option cannot be chosen.

Integrating with Other Components

Wrap select with Shadcn Field to add a label, description, and validation error messages. Use Shadcn Fieldset and Shadcn Legend to group multiple select fields under a common title.

For large searchable lists, use Shadcn Combobox instead. For simple single-choice forms with few options, use Shadcn Radio Group so all options are visible without opening a dropdown.

Pair select with Shadcn Button for form submission. Add Shadcn Popover to provide help text or examples if users are unsure which option to pick. For mobile optimization, offer Shadcn Native Select as an alternative that uses OS-level pickers.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

  • Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

Should I use Select or native <select>?

Use Shadcn Select when design consistency and custom styling matter. Use Native Select (or Shadcn Native Select) when you prioritize performance, minimal JS, and perfect mobile UX (iOS picker). Combobox is best for large searchable lists.

What is the difference between Select and Combobox?

Select displays a dropdown menu of options when clicked; users pick one. Combobox combines a text input with a dropdown; users can type to filter options or click to see all. Use Select for short lists (5 to 20 items); Combobox for large lists where searching saves time.

How do I add search or filtering to a Select?

For simple filtering, use Shadcn Combobox instead, which includes search. For Select, if you need to filter options, a separate search input field above the select is clearer than hiding search inside the dropdown.

Can I use Select with React Hook Form?

Yes. Register the select field and manage value with form state. Use Zod or Yup to validate that a selection is made. Show validation errors via Shadcn Field below the select.

How do I handle multi-select with Shadcn Select?

Shadcn Select supports single selection. For multi-select, use a custom component with checkboxes or consider Shadcn Checkbox groups. Alternatively, use a third-party multi-select library and style it to match Shadcn tokens.

Is Select keyboard and screen-reader accessible?

Yes. Radix UI Select includes arrow key navigation, Space/Enter selection, and Tab to enter/exit. Screen readers announce the current selection and option count. Always pair with a Shadcn Field label.
Previous2 Shadcn Scrollspy Components
Next6 Shadcn Separator Components

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K

A basic select component with a list of options

Select with icons and placeholder state

Select component with grouped options and labels

Select component with a large list of options

Select component with small trigger size

Select component with a subscription plan style

Select component with item alignment disabled

Select component within a Field with label and description

Select component in an invalid state

Select component in a disabled state

Select component inside a Dialog

Select component with multiple selection

Select component inline with Input

Select component with Button side by side

Select component with item alignment enabled

Select with custom access level descriptions

Select with colored bullets for status

Select with user avatars

Select with status badges

Select with indicator on the left side

Select with clear button

Select with custom chevrons up down icon

Multi-select with overlapping dots

Select with grouped options and separators

Country picker select with flag emojis

Status filter select with colored dots

Select with description text per option

Timezone select with UTC offsets

Select with avatar items for team member assignment

Priority select with colored badges

Font family select with preview

Select with icon-labeled categories

Size variant select with small trigger