Select

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download select -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
} from "@/components/ui/select";
<Select isDisabled={false}>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Group</SelectLabel>
      <SelectItem value="1">Option 1</SelectItem>
      <SelectItem value="2">Option 2</SelectItem>
      <SelectItem value="3">Option 3</SelectItem>
      <SelectItem value="4">Option 4</SelectItem>
      <SelectItem value="5">Option 5</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>;

Examples

Default

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
} from "@/components/ui/select";
<Select isDisabled={false}>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Group</SelectLabel>
      <SelectItem value="1">Option 1</SelectItem>
      <SelectItem value="2">Option 2</SelectItem>
      <SelectItem value="3">Option 3</SelectItem>
      <SelectItem value="4">Option 4</SelectItem>
      <SelectItem value="5">Option 5</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>;

Scrollable

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
} from "@/components/ui/select";
<Select>
  <SelectTrigger>
    <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>;

Truncate

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
} from "@/components/ui/select";
<Select isDisabled={false}>
  <SelectTrigger className="w-[100px]">
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Group</SelectLabel>
      <SelectItem value="1">Option 1</SelectItem>
      <SelectItem value="2">Option 2</SelectItem>
      <SelectItem value="3">Option 3</SelectItem>
      <SelectItem value="4">Option 4</SelectItem>
      <SelectItem value="5">Very long label</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.