Select

A dropdown select control with a styled trigger and popup listbox for choosing one or multiple options from a list.

@delego

Outline and soft select variants preview

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

const fruits = [
  "Apple",
  "Banana",
  "Blueberry",
  "Grapes",
  "Orange",
  "Strawberry",
];
const variants = ["outline", "soft"] as const;

export default function SelectVariants() {
  return (
    <div className="flex w-full max-w-70 flex-col gap-4">
      {variants.map((variant) => (
        <Select key={variant} variant={variant}>
          <SelectTrigger aria-label={`Pick a fruit (${variant})`}>
            <SelectValue placeholder="Pick a fruit" />
          </SelectTrigger>
          <SelectContent>
            {fruits.map((fruit) => (
              <SelectItem key={fruit} value={fruit}>
                {fruit}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      ))}
    </div>
  );
}