Select

Select component based on Headless UI Listbox. Support multiple selection.

Usage

Use <VSelect /> component to create select input.

View Code

<script setup lang="ts">
const items = ref([
  { value: 1, text: "Wade Cooper" },
  { value: 2, text: "Arlene Mccoy" },
  { value: 3, text: "Devon Webb" },
  { value: 4, text: "Tom Cook" },
  { value: 5, text: "Tanya Fox" },
  { value: 6, text: "Hellen Schmidt" },
]);

const selected = ref();
</script>

<template>
  <VSelect
    v-model="selected"
    placeholder="Choose..."
    :items="items"
  />
</template>

Multiple

Use multiple prop to enable multiple selection to the select component.

View Code

<script setup lang="ts">
const items = ref([
  { value: 1, text: "Wade Cooper" },
  { value: 2, text: "Arlene Mccoy" },
  { value: 3, text: "Devon Webb" },
  { value: 4, text: "Tom Cook" },
  { value: 5, text: "Tanya Fox" },
  { value: 6, text: "Hellen Schmidt" },
]);

const selected = ref();
</script>

<template>
  <VSelect
    v-model="selected"
    placeholder="Choose..."
    :items="items"
    multiple
  />
</template>

Props

Property	Type	Required	Default	Description
`modelValue`	`VSelectItem`	Yes	-	The selected item in the dropdown list.
`items`	`VSelectItem[]`	Yes	`[]`	An array of `VSelectItem` objects to display in the dropdown list.
`placeholder`	`string`	No	`'Choose'`	The placeholder text to display when no item is selected.
`hideCheckIcon`	`boolean`	No	`false`	Specifies whether to hide the check icon when an item is selected.
`outlined`	`boolean`	No	`false`	Specifies whether the dropdown list should be displayed with an outlined border.
`large`	`boolean`	No	`false`	Specifies whether the dropdown list should be displayed with a large size.
`small`	`boolean`	No	`false`	Specifies whether the dropdown list should be displayed with a small size.

Events

Name	Payload	Description
`update:modelValue`	`{value: VSelectItem}`	Triggered when `modelValue` prop changed

Types

export type VSelectItem = {
  text: string;
  value: string | number;
  divider?: boolean;
};