Select

Displays a list of options for the user to pick from, triggered by a button.

Installation

bash
npx shadcn@latest add select

Import

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

Basic

Disabled

Props

Select

PROPTYPEDEFAULTDESCRIPTION
valuestring—Controlled selected value
onValueChange(val: string) => void—Called when value changes
defaultValuestring—Initial value (uncontrolled)
disabledbooleanfalseDisables the entire select
requiredbooleanfalseMarks as required in a form

SelectContent

PROPTYPEDEFAULTDESCRIPTION
position"popper" | "item-aligned""popper"Positioning mode for the dropdown
sidestring—Preferred side of the trigger
sideOffsetnumber—Offset from the trigger

SelectItem

PROPTYPEDEFAULTDESCRIPTION
valuestring—Item value (required)
disabledbooleanfalseDisables the item

Accessibility

  • Arrow Up/Down navigates items
  • Type a character to jump to matching item
  • Enter selects the focused item
  • Escape closes the dropdown