Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Select
description: Displays a list of options for the user to pick from, triggered by a button.
---

```astro live props={{ name: '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

```bash
npx shadcn@latest add @fulldev/select
```

## Usage

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

```astro
<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`:

```text
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.

```astro live
---
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.

```astro live
---
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.

```astro live
---
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.

```astro live
---
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/select) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/select/README.md) for more information on interactivity.