GitHub
DocsSelect

Select

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

Preview

Installation

npx shadcn@latest add select

Usage

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

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a framework" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="remix">Remix</SelectItem>
  </SelectContent>
</Select>

Props

value — controlled selected value

defaultValue — initial value (uncontrolled)

onValueChange — callback fired when selection changes

disabled — disables the select

open / onOpenChange — control dropdown open state

Radio GroupSwitch