8.9k

Select

PreviousNext

Displays a list of options for the user to pick from—triggered by a button.

Docs API Reference 
<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
</script>

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

Installation

pnpm dlx @frontic/ui add select

Usage

<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
</script>

<template>
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select 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>
</template>

Examples

Scrollable

<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
</script>

<template>
  <Select>
    <SelectTrigger class="w-[280px]">
      <SelectValue placeholder="Select a timezone" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>North America</SelectLabel>
        <SelectItem value="est">
          Eastern Standard Time (EST)
        </SelectItem>
        <SelectItem value="cst">
          Central Standard Time (CST)
        </SelectItem>
        <SelectItem value="mst">
          Mountain Standard Time (MST)
        </SelectItem>
        <SelectItem value="pst">
          Pacific Standard Time (PST)
        </SelectItem>
        <SelectItem value="akst">
          Alaska Standard Time (AKST)
        </SelectItem>
        <SelectItem value="hst">
          Hawaii Standard Time (HST)
        </SelectItem>
      </SelectGroup>

      <SelectGroup>
        <SelectLabel>Europe & Africa</SelectLabel>
        <SelectItem value="gmt">
          Greenwich Mean Time (GMT)
        </SelectItem>
        <SelectItem value="cet">
          Central European Time (CET)
        </SelectItem>
        <SelectItem value="eet">
          Eastern European Time (EET)
        </SelectItem>
        <SelectItem value="west">
          Western European Summer Time (WEST)
        </SelectItem>
        <SelectItem value="cat">
          Central Africa Time (CAT)
        </SelectItem>
        <SelectItem value="eat">
          East Africa Time (EAT)
        </SelectItem>
      </SelectGroup>

      <SelectGroup>
        <SelectLabel>Asia</SelectLabel>
        <SelectItem value="msk">
          Moscow Time (MSK)
        </SelectItem>
        <SelectItem value="ist">
          India Standard Time (IST)
        </SelectItem>
        <SelectItem value="cst_china">
          China Standard Time (CST)
        </SelectItem>
        <SelectItem value="jst">
          Japan Standard Time (JST)
        </SelectItem>
        <SelectItem value="kst">
          Korea Standard Time (KST)
        </SelectItem>
        <SelectItem value="ist_indonesia">
          Indonesia Central Standard Time (WITA)
        </SelectItem>
      </SelectGroup>

      <SelectGroup>
        <SelectLabel>Australia & Pacific</SelectLabel>
        <SelectItem value="awst">
          Australian Western Standard Time (AWST)
        </SelectItem>
        <SelectItem value="acst">
          Australian Central Standard Time (ACST)
        </SelectItem>
        <SelectItem value="aest">
          Australian Eastern Standard Time (AEST)
        </SelectItem>
        <SelectItem value="nzst">
          New Zealand Standard Time (NZST)
        </SelectItem>
        <SelectItem value="fjt">
          Fiji Time (FJT)
        </SelectItem>
      </SelectGroup>

      <SelectGroup>
        <SelectLabel>South America</SelectLabel>
        <SelectItem value="art">
          Argentina Time (ART)
        </SelectItem>
        <SelectItem value="bot">
          Bolivia Time (BOT)
        </SelectItem>
        <SelectItem value="brt">
          Brasilia Time (BRT)
        </SelectItem>
        <SelectItem value="clt">
          Chile Standard Time (CLT)
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>

Multiple

<script setup lang="ts">
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
</script>

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