Select

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

@delego

Controlled select with external state preview

"use client";

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

const fruits = [
  "Apple",
  "Banana",
  "Blueberry",
  "Grapes",
  "Orange",
  "Strawberry",
];

export default function SelectControlled() {
  const [value, setValue] = React.useState<string | null>(null);

  return (
    <div className="flex w-full max-w-70 flex-col gap-3">
      <Select value={value} onValueChange={(v) => setValue(v as string | null)}>
        <SelectTrigger clearable aria-label="Pick a fruit">
          <SelectValue placeholder="Pick a fruit" />
        </SelectTrigger>
        <SelectContent>
          {fruits.map((fruit) => (
            <SelectItem key={fruit} value={fruit}>
              {fruit}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <p className="text-foreground-muted text-sm">
        Current value:{" "}
        <span className="text-foreground font-medium">{value ?? "-"}</span>
      </p>
    </div>
  );
}