Select

<Select>
  <SelectTrigger className="w-[240px]">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="blueberry">Blueberry</SelectItem>
    <SelectItem value="grapes">Grapes</SelectItem>
    <SelectItem value="pineapple">Pineapple</SelectItem>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[240px]">
    <SelectValue placeholder="Pick anything" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="aubergine">Aubergine</SelectItem>
      <SelectItem value="broccoli">Broccoli</SelectItem>
      <SelectItem value="carrot" disabled>Carrot (sold out)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Meat</SelectLabel>
      <SelectItem value="beef">Beef</SelectItem>
      <SelectItem value="chicken">Chicken</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select
  searchable
  options={[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "blueberry", label: "Blueberry" },
    { value: "grapes", label: "Grapes" },
    { value: "pineapple", label: "Pineapple" },
    { value: "aubergine", label: "Aubergine" },
    { value: "broccoli", label: "Broccoli" },
    { value: "carrot", label: "Carrot", disabled: true },
    { value: "leek", label: "Leek" },
    { value: "beef", label: "Beef" },
    { value: "chicken", label: "Chicken" },
  ]}
  placeholder="Pick anything"
  searchPlaceholder="Search…"
  triggerClassName="w-[240px]"
/>

<>
  <Select>
    <SelectTrigger variant="default" className="w-[180px]"><SelectValue placeholder="Default" /></SelectTrigger>
    <SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent>
  </Select>
  <Select>
    <SelectTrigger variant="outline" className="w-[180px]"><SelectValue placeholder="Outline" /></SelectTrigger>
    <SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent>
  </Select>
  <Select>
    <SelectTrigger variant="ghost" className="w-[180px]"><SelectValue placeholder="Ghost" /></SelectTrigger>
    <SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent>
  </Select>
</>

<>
  <Select>
    <SelectTrigger size="sm" className="w-[180px]"><SelectValue placeholder="Small" /></SelectTrigger>
    <SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent>
  </Select>
  <Select>
    <SelectTrigger size="md" className="w-[180px]"><SelectValue placeholder="Medium" /></SelectTrigger>
    <SelectContent><SelectItem value="a">Option A</SelectItem></SelectContent>
  </Select>
</>

<Select defaultValue="banana">
  <SelectTrigger className="w-[240px]"><SelectValue /></SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

<Select disabled>
  <SelectTrigger className="w-[240px]">
    <SelectValue placeholder="Locked" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="x">X</SelectItem>
  </SelectContent>
</Select>