Select

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

<Select class="w-[180px]" placeholder="Select a fruit">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <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>
    </SelectGroup>
  </SelectContent>
</Select>

Installation

npx shadcn@latest add @fulldev/select

Usage

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

<Select class="w-[180px]" placeholder="Select a fruit">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <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>
    </SelectGroup>
  </SelectContent>
</Select>

Composition

Use the following composition to build a Select:

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

Examples

Item Aligned

Use the position prop on SelectContent to control alignment. When position="item-aligned" (default), the popup positions so the selected item appears over the trigger. When position="popper", the popup aligns to the trigger edge.

Item aligned

Popper

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

<div class="grid w-full max-w-2xl gap-6 @md:grid-cols-2">
  <div class="flex flex-col gap-3">
    <p class="text-sm font-medium">Item aligned</p>
    <Select defaultValue="team" class="max-w-xs">
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent position="item-aligned">
        <SelectItem value="starter">Starter workspace</SelectItem>
        <SelectItem value="team">Team workspace</SelectItem>
        <SelectItem value="enterprise">Enterprise workspace</SelectItem>
      </SelectContent>
    </Select>
  </div>

  <div class="flex flex-col gap-3">
    <p class="text-sm font-medium">Popper</p>
    <Select defaultValue="team" class="max-w-xs">
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent position="popper" side="bottom" align="start">
        <SelectItem value="starter">Starter workspace</SelectItem>
        <SelectItem value="team">Team workspace</SelectItem>
        <SelectItem value="enterprise">Enterprise workspace</SelectItem>
      </SelectContent>
    </Select>
  </div>
</div>

With Groups & Labels

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

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

<Select class="max-w-xs" placeholder="Pick produce">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="carrot">Carrot</SelectItem>
      <SelectItem value="spinach">Spinach</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Large List

A select with many items that scrolls.

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

const timezones = [
  "Pacific/Honolulu",
  "America/Anchorage",
  "America/Los_Angeles",
  "America/Denver",
  "America/Chicago",
  "America/New_York",
  "America/Sao_Paulo",
  "Europe/London",
  "Europe/Amsterdam",
  "Europe/Berlin",
  "Europe/Athens",
  "Asia/Dubai",
  "Asia/Kolkata",
  "Asia/Bangkok",
  "Asia/Tokyo",
  "Australia/Sydney",
]
---

<Select class="max-w-xs" placeholder="Select timezone">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent class="max-h-56">
    {
      timezones.map((timezone) => (
        <SelectItem value={timezone}>{timezone}</SelectItem>
      ))
    }
  </SelectContent>
</Select>

Disabled

Disable the entire select or individual items.

Disabled item

Disabled select

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

<div class="grid w-full max-w-md gap-6 @md:grid-cols-2">
  <div class="flex flex-col gap-3">
    <p class="text-sm font-medium">Disabled item</p>
    <Select defaultValue="pro" class="max-w-xs">
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="starter">Starter</SelectItem>
        <SelectItem value="pro">Pro</SelectItem>
        <SelectItem value="enterprise" disabled>Enterprise</SelectItem>
      </SelectContent>
    </Select>
  </div>

  <div class="flex flex-col gap-3">
    <p class="text-sm font-medium">Disabled select</p>
    <Select disabled class="max-w-xs" placeholder="Unavailable">
      <SelectTrigger>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="starter">Starter</SelectItem>
      </SelectContent>
    </Select>
  </div>
</div>

API Reference

See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.

Sidebar

Search