Select

The Select component presents users with a dropdown list of predefined options, allowing them to choose a single value. This selection interface is typically activated by interacting with a button or similar control.

Docs API Reference

Setting Up the Select Component

npx shadcn@latest add select

Implementing the Select Component

  Select, // The main container for the select component
  SelectContent, // Contains the list of available options
  SelectItem, // Represents an individual option within the list
  SelectTrigger, // The interactive element that opens the select dropdown
  SelectValue, // Displays the currently selected value
} from "@/components/ui/select";

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Practical Examples and Implementations

Implementing a Scrollable Select Dropdown

Integrating Select within a Form Structure

Scroll Area Separator