Shadcn Select Components

A select is a form control that allows the user to select a value from a list of options. Every select example supports both Radix UI and Base UI conventions. Browse our collection of 15 Shadcn Select variants.

Default

Auto width

Select with placeholder

Select with icon

Select with helper text

Tell us what‘s your favorite Select framework

Select with error

Selected option is invalid

Select with options groups

Select with overlapping label

Frameworks

Status select

Select with icon and right indicator

Select with description and right indicator

Select with avatar

Select with portrait

Select with search

Select with search and button

PreviousRadio Group

NextSwitch

Unlock premium components

Get full control of shadcn/ui components, blocks and instances, including future additions.

Unlock Now

Explore Shadcn Blocks

Ready-made page sections built with the same components.

Shadcn Select Component

The Shadcn Select is a form control that lets users pick one value from a list of options shown in a floating panel. It is the custom styled alternative to the native select element, used for choosing a country, a plan, a status, a time zone or any other value from a fixed list in forms, filters and settings pages.

Grouped options, icons, avatars and status dots: every select on this page is built with shadcn/ui, React and Tailwind CSS. Each one works with both Radix UI and Base UI select primitives. Besides the plain dropdown you will find React select examples with icons, status dots, avatars, grouped options, error states and a searchable version, all with dark mode and shadcn CLI installs.

What is the Shadcn Select Component?

A select is a button that shows the current value and opens a listbox of options. The primitive manages the open state, keyboard navigation, typeahead and focus, and renders the options in a portal so they are never clipped by a parent with overflow: hidden. Unlike the native element, every part is styled with Tailwind CSS, and options can contain icons, avatars, status dots or a second line of text.

Pick the right control for the job. A Native Select is lighter and uses the operating system picker on mobile. When the list is long and users need to type to filter it, use a Combobox. With only two to five options that should all stay visible, a Radio Group is usually faster to use.

Anatomy of the Shadcn Select

Part	Description
Select	The root. Holds the value with `value`, `defaultValue` and `onValueChange`, and accepts `name`, `required` and `disabled` for forms.
SelectTrigger	The button that opens the list, with a chevron icon. Supports `size="sm"` and shows error styles when `aria-invalid` is set.
SelectValue	Displays the selected option inside the trigger, or the placeholder when nothing is selected.
SelectContent	The floating panel rendered in a portal. By default it aligns the selected item over the trigger; set `position="popper"` to open it below instead.
SelectItem	One option with a required `value` and a check mark when selected. Accepts `disabled`.
SelectGroup	Groups related options together.
SelectLabel	A non-selectable heading for a group of options.
SelectSeparator	A thin line between groups of options.
SelectScrollUpButton	Appears at the top of a long list and scrolls it up on hover. Included in SelectContent automatically.
SelectScrollDownButton	The matching button at the bottom of a long list, also included automatically.

15 Shadcn Select Variants

Each select variant listed here is previewed live at the top of this page, together with its source code and install command.

Default and auto width: A full width select with a placeholder, and a compact trigger with a preselected value that sizes itself to its content.
With icon: A leading clock icon inside the trigger for time and schedule pickers.
Helper text and error: A muted hint below the field, and an invalid state with a destructive border and an error message.
Option groups: Frontend and Backend groups with labels, for long lists that fall into categories.
Overlapping label: A floating style label that sits on the top border of the trigger to save vertical space.
Status and icons: Task statuses with colored dots, and frameworks with brand icons, where the dot or icon is also shown next to the value in the trigger.
Descriptions, avatars and portraits: Plans with a second line of text that is hidden in the trigger, an Impersonate user group with small avatars, and rows with a round portrait, name and handle.
Searchable: A select style Popover with a Command search input, including one with a New organization button below the results.

How to Install the Shadcn Select Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a select variant by its name:

npx shadcn@latest add @shadcnuikit/select1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Select Component

Import the parts from your components/ui folder. Give each item a unique string value, and use onValueChange to react to the selection.

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function TimezoneSelect() {
  return (
    <Select name="timezone" onValueChange={(value) => console.log(value)}>
      <SelectTrigger className="w-64" aria-label="Time zone">
        <SelectValue placeholder="Select a time zone" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Europe</SelectLabel>
          <SelectItem value="europe-london">London</SelectItem>
          <SelectItem value="europe-berlin">Berlin</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>America</SelectLabel>
          <SelectItem value="america-new-york">New York</SelectItem>
          <SelectItem value="america-chicago">Chicago</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Why Use the Shadcn Select Component

Fully styleable: Trigger, list and options are regular elements with Tailwind classes, unlike the native select.
Rich options: Options can include icons, avatars, status dots and descriptions.
Accessible by default: Listbox semantics, keyboard navigation and typeahead come from the primitive.
Works in forms: Inside a form, the primitive renders a hidden native select, so the value is submitted under the name you pass.
Theme aware: Colors come from your popover, input and ring tokens, so the select follows your palette and dark mode.

Common Select Use Cases

Form fields: Country, language, role or plan fields in sign up and checkout forms.
Table filters: Filter a list by status, owner or date range.
Settings pages: Theme, time zone and notification frequency preferences.
Status pickers: Set the status of a task or order with colored indicators.
Account switchers: Choose a user, team or organization with avatars.
Pricing and plans: Pick a plan or billing period with a short description.

Customizing the Shadcn Select

Set the trigger width with a class such as w-full, use size="sm" in dense toolbars, and switch SelectContent to position="popper" when the list should always open below the trigger. Anything you put inside SelectItem is also shown in the trigger, so hide extras like descriptions there with a data attribute, as the plan variant does. Colors follow your theme; generate a palette with the free Theme Generator.

For example, this opens the list below the trigger at the same width:

<Select>
  <SelectTrigger className="w-full">
    <SelectValue placeholder="Select a plan" />
  </SelectTrigger>
  <SelectContent position="popper">
    <SelectItem value="starter">Starter</SelectItem>
    <SelectItem value="pro">Pro</SelectItem>
  </SelectContent>
</Select>

Select Accessibility and Keyboard Support

The select follows the WAI-ARIA listbox pattern. The trigger is a combobox with aria-expanded, the options have the option role and aria-selected, and focus returns to the trigger when the list closes. Typing a letter jumps to the first option that starts with it.

Always give the trigger an accessible name, either with a visible label element whose htmlFor matches the trigger's id or with aria-label. For errors, set aria-invalid on the trigger and show a message in text, not only in red.

Key	Action
`Space`	Opens the list, or selects the highlighted option.
`Enter`	Opens the list, or selects the highlighted option.
`ArrowDown`	Opens the list, or highlights the next option.
`ArrowUp`	Opens the list, or highlights the previous option.
`Home`	Highlights the first option.
`End`	Highlights the last option.
`Escape`	Closes the list and returns focus to the trigger.

Select Best Practices

Use a clear placeholder such as Select a country, and a visible label above the field.
Sort options in a logical order: alphabetical, by frequency or by size.
Group long lists with SelectGroup and SelectLabel so users can scan them.
Keep option labels short; move extra detail into a muted second line.
Switch to a Combobox once the list is long enough that users want to search it.
Consider a Native Select on mobile heavy forms where the system picker is more comfortable.

Components Related to Select

Shadcn ComboboxA searchable select for long lists of options.Shadcn Native SelectA styled native select that uses the system picker.Shadcn Radio GroupShows all options at once for short lists.Shadcn FieldAdds labels, descriptions and errors around a select.

Shadcn Select FAQ

Render the Select inside a Controller (or your form field wrapper) and pass field.value to value and field.onChange to onValueChange. Put the field's name on the Select and show validation errors with aria-invalid on the trigger.

The Select component does not support filtering. Build a combobox instead: a Popover with a button trigger and a Command list inside it, with CommandInput for search. The searchable variants on this page use exactly this pattern.

Control the value with state and set it to an empty string. With Radix UI an empty string shows the placeholder again. Note that SelectItem itself cannot use an empty string as its value.

By default SelectContent uses position="item-aligned", which places the selected option over the trigger like a native macOS menu. Set position="popper" on SelectContent to open the list below the trigger instead.

Place a Lucide icon before the label text inside SelectItem. The item content is rendered as the selected value too, so the icon also appears in the trigger, where SelectValue is laid out as a flex row with a small gap. Icons without a size class are set to size-4 automatically.

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.