Select

import { Select } from "@/components/ui/select";

import { Select } from "@/components/ui/select";

export function Example() {
  return (
    <Select
      defaultValue="usd"
      placeholder="Select a currency"
      triggerClassName="w-full"
      options={[
        { value: "usd", label: "USD — United States Dollar" },
        { value: "eur", label: "EUR — Euro" },
        { value: "gbp", label: "GBP — British Pound" },
      ]}
    />
  );
}

Select                            (single component — pass options or groups as data)
├── options={[{ value, label, disabled? }]}
├── groups={[{ label?, options: [{value, label, disabled?}] }]}
├── placeholder={<ReactNode>}
├── size="default" | "sm"
├── triggerClassName / contentClassName
└── ...rest                       (value / defaultValue / onValueChange / disabled / id)

Variants on the same component:

Select                            (default — popover listbox)
├── searchable                    → Combobox-backed input + filtered list
├── multiple                      → multi-select (works with or without searchable)
└── searchable + multiple         → multi-search; picks render comma-joined as real input text

Without options/groups, Select stays compound — drop in SelectTrigger +
SelectContent + SelectItem children manually. The slot exports — SelectTrigger,
SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel,
SelectSeparator — remain available as the escape hatch. The Combobox* slot
exports also live in select.tsx for fully custom searchable layouts (chips, etc.).