Select

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

@delego

"use client";

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

const toppings = [
  "Pepperoni",
  "Mushrooms",
  "Onions",
  "Olives",
  "Peppers",
  "Bacon",
  "Pineapple",
];

export default function SelectMultiple() {
  const [value, setValue] = React.useState<string[]>([
    "Pepperoni",
    "Mushrooms",
  ]);

  return (
    <div className="w-full max-w-70">
      <Select
        multiple
        value={value}
        onValueChange={(v) => setValue(v as string[])}
      >
        <SelectTrigger clearable aria-label="Choose toppings">
          <SelectValue placeholder="Choose toppings">
            {(selected: string[]) =>
              selected.length === 0
                ? "Choose toppings"
                : selected.length === 1
                  ? selected[0]
                  : `${selected.length} toppings`
            }
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {toppings.map((topping) => (
            <SelectItem key={topping} value={topping}>
              {topping}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}