Select

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

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Options</SelectLabel>
      <SelectItem value="option-1">Option 1</SelectItem>
      <SelectItem value="option-2">Option 2</SelectItem>
      <SelectItem value="option-3">Option 3</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern Time (ET)</SelectItem>
      <SelectItem value="cst">Central Time (CT)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
      <SelectItem value="cet">Central European Time (CET)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Field data-invalid>
  <FieldLabel htmlFor="country">Country</FieldLabel>
  <Select>
    <SelectTrigger id="country" className="w-48" aria-invalid>
      <SelectValue placeholder="Select a country" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="fr">France</SelectItem>
      <SelectItem value="de">Germany</SelectItem>
      <SelectItem value="es">Spain</SelectItem>
    </SelectContent>
  </Select>
  <FieldError>Please select a country.</FieldError>
</Field>

<Select disabled>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
  </SelectContent>
</Select>

npx shadcn@latest add https://solar-ui.com/r/select.json

npm install @radix-ui/react-select

"use client"
 
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { cn } from "@/lib/utils"
 
// SelectTrigger shows value + chevron icon
// SelectContent wraps viewport with scroll up/down buttons
// SelectItem shows checkmark on selected