Select

Installation

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

pnpm exec frontfriend download select -f vue --primitive reka

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

Usage

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

const Component = UI.Select;

const args = {
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Select v-bind="args"
    ><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>

Examples

Default

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

const Component = UI.Select;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Select v-bind="args"
    ><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>

Scrollable

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

const Component = UI.Select;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</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
        ></SelectGroup
      ><SelectGroup
        ><SelectLabel>Europe &amp; Africa</SelectLabel
        ><SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem
        ><SelectItem value="cet">Central European Time (CET)</SelectItem
        ><SelectItem value="cat"
          >Central Africa Time (CAT)</SelectItem
        ></SelectGroup
      ><SelectGroup
        ><SelectLabel>Asia</SelectLabel
        ><SelectItem value="ist">India Standard Time (IST)</SelectItem
        ><SelectItem value="jst">Japan Standard Time (JST)</SelectItem
        ><SelectItem value="kst"
          >Korea Standard Time (KST)</SelectItem
        ></SelectGroup
      ></SelectContent
    ></Select
  >
</template>

Truncate

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

const Component = UI.Select;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Select
    ><SelectTrigger class="w-[120px]"
      ><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"
          >A very long label that truncates</SelectItem
        ></SelectGroup
      ></SelectContent
    ></Select
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

SelectContent

SelectGroup

SelectItem

SelectLabel

SelectSeparator

SelectTrigger

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