Select
Let users pick one option from a dropdown in React forms. Accessible Radix Select with keyboard typeahead, groups, and scrolling. Install via the shadcn CLI.
What it is & when to use
Select is a dropdown input built on Radix UI's Select primitive for choosing a single value from a list. Click the trigger to open a portal-rendered menu with keyboard navigation, typeahead, grouped options, labels, separators, and scroll buttons for long lists. Use it in forms when the option set is known and you want a styled, accessible alternative to the native select element. It is composed from Select, SelectTrigger, SelectContent, and SelectItem parts.
Browse all FormPreview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/select.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
"use client";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "../../lib/utils";
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = ({
children,
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Trigger>>;
}) => (
<SelectPrimitive.Trigger
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
ref={ref}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="size-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
);
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>>;
}) => (
<SelectPrimitive.ScrollUpButton
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
ref={ref}
{...props}
>
<ChevronUp className="size-4" />
</SelectPrimitive.ScrollUpButton>
);
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>>;
}) => (
<SelectPrimitive.ScrollDownButton
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
ref={ref}
{...props}
>
<ChevronDown className="size-4" />
</SelectPrimitive.ScrollDownButton>
);
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = ({
children,
className,
position = "popper",
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Content>>;
}) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
)}
position={position}
ref={ref}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
);
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Label>>;
}) => (
<SelectPrimitive.Label
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
ref={ref}
{...props}
/>
);
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = ({
children,
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Item>>;
}) => (
<SelectPrimitive.Item
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
ref={ref}
{...props}
>
<span className="absolute left-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="size-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
);
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
ref?: React.Ref<React.ComponentRef<typeof SelectPrimitive.Separator>>;
}) => (
<SelectPrimitive.Separator
className={cn("-m-1 h-px bg-muted", className)}
ref={ref}
{...props}
/>
);
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
};
Frequently asked questions
- What is Select?
- Select is an accessible dropdown input for React, built on Radix UI's Select primitive. It lets users choose one value from a list and is composed of Select, SelectTrigger, SelectContent, and SelectItem parts.
- How do I add Select?
- Run pnpm dlx shadcn@latest add https://ui.vllnt.com/r/select.json to copy the source into your project, then import the Select parts from your ui directory.
- Is Select keyboard accessible?
- Yes. Because it wraps Radix UI's Select primitive, it supports full keyboard navigation, typeahead to jump to options, and correct listbox ARIA roles out of the box.