WFP logoDesign System
Components

Select

View on shadcn/ui

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

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/select.json

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
<Select>
  <SelectTrigger className="w-45">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>

Examples

Scrollable

On this page

InstallationUsageExamplesScrollable