Select

import { MultiSelect } from "@/components/ui/multi-select";

const [value, setValue] = useState<string[]>(["apple", "banana"]);

<MultiSelect
  options={[
    { value: "apple", label: "Apple", icon: "🍎" },
    { value: "banana", label: "Banana", icon: "🍌" },
    { value: "blueberry", label: "Blueberry", icon: "🫐" },
  ]}
  value={value}
  onValueChange={setValue}
  placeholder="Select fruits"
  maxDisplay={3}
/>

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

<Select>
  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

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

<Select>
  <SelectTrigger><SelectValue placeholder="Select a timezone" /></SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Asia</SelectLabel>
      <SelectItem value="seoul">Seoul (KST)</SelectItem>
      <SelectItem value="tokyo">Tokyo (JST)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>America</SelectLabel>
      <SelectItem value="new-york">New York (EST)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select defaultValue="kr">
  <SelectTrigger><SelectValue /></SelectTrigger>
  <SelectContent>
    <SelectItem value="kr">
      <span className="mr-2">🇰🇷</span> Korea
    </SelectItem>
    <SelectItem value="us">
      <span className="mr-2">🇺🇸</span> United States
    </SelectItem>
  </SelectContent>
</Select>

import { Command, CommandInput, CommandItem, ... } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";

const [open, setOpen] = useState(false);
const [value, setValue] = useState("");

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger>{value || "Select language…"}</PopoverTrigger>
  <PopoverContent className="p-0">
    <Command>
      <CommandInput placeholder="Search language…" />
      <CommandList>
        <CommandEmpty>No language found.</CommandEmpty>
        <CommandGroup>
          {LANGUAGES.map((l) => (
            <CommandItem key={l.value} onSelect={() => {
              setValue(l.value); setOpen(false);
            }}>
              {l.label}
              {value === l.value && <span className="ml-auto">✓</span>}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  </PopoverContent>
</Popover>

<SelectItem value="pro">
  <div className="flex flex-col items-start">
    <span className="font-medium">Pro</span>
    <span className="text-xs text-muted-foreground">$29/mo · for teams</span>
  </div>
</SelectItem>

// Disabled select
<Select disabled>
  <SelectTrigger><SelectValue placeholder="Cannot select" /></SelectTrigger>
</Select>

// Invalid select
<SelectTrigger
  aria-invalid="true"
  className="border-destructive focus-visible:ring-destructive/30"
/>

// Disabled single item
<SelectItem value="x" disabled>Disabled item</SelectItem>