Select

A dropdown for choosing one or more values from a list.

<template>
  <Select :items="[{ value: 'a', label: 'Apple' }]" model-value="a" placeholder="Fruits" />
</template>

Props

Name	Type	Default
items	({ type: 'label'; label: string } \| { value: string; label: string; description?: string; icon?: string; sublabel?: string; disabled?: boolean })[]	—
placeholder	string	'Select something'
icon	string	—
multiple	boolean	false
size	'md' \| 'sm' \| 'xs'	'md'
modelValue	string \| string[]	—

Usage

Examples

Multiple sections

Items grouped under more than one section header.

<template>
  <Select
    v-model="selected"
    :items="[
      { type: 'label', label: 'Fruits' },
      { value: 'apple', label: 'Apple' },
      { value: 'banana', label: 'Banana' },
      { type: 'label', label: 'Vegetables' },
      { value: 'carrot', label: 'Carrot' },
      { value: 'potato', label: 'Potato' },
    ]"
    placeholder="Ingredients"
  />
</template>

With icon

A leading icon on the trigger for extra context.

<template>
  <Select
    v-model="selected"
    :items="[
      { value: 'open', label: 'Open' },
      { value: 'true_positive', label: 'Triaged' },
      { value: 'resolved', label: 'Resolved' },
      { value: 'accepted_risk', label: 'Accepted Risk' },
      { value: 'false_positive', label: 'False Positive' },
    ]"
    icon="i-lucide-circle-dot"
    placeholder="Status"
  />
</template>

With sublabel

A monospace value shown inline next to each item's own label.

<template>
  <Select
    v-model="selected"
    :items="[
      { value: 'apple', label: 'Apple', sublabel: 'AAPL' },
      { value: 'banana', label: 'Banana', sublabel: 'BNNA' },
      { value: 'blueberry', label: 'Blueberry', sublabel: 'BLBY' },
    ]"
    placeholder="Fruits"
  />
</template>

Multiple select

Selecting more than one item at once, shown as a count.

<template>
  <Select
    v-model="selected"
    :items="[
      { value: 'apple', label: 'Apple' },
      { value: 'banana', label: 'Banana' },
      { value: 'blueberry', label: 'Blueberry' },
      { value: 'grapes', label: 'Grapes' },
      { value: 'pineapple', label: 'Pineapple' },
    ]"
    multiple
    placeholder="Fruits"
  />
</template>

Sizes

The three trigger height steps — xs, sm, and md.

<template>
  <Select v-model="selected" :items="items" size="xs" placeholder="Fruits" />
  <Select v-model="selected" :items="items" size="sm" placeholder="Fruits" />
  <Select v-model="selected" :items="items" size="md" placeholder="Fruits" />
</template>