On this page

Select

The Select component is used for selecting one or more choices in a form.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { Select } from '@sigveh/basic-ui'

const fruits = ref([
  { label: 'Apple', value: 'apple' },
  { label: 'Orange', value: 'orange' },
  { label: 'Pear', value: 'pear' },
])
</script>

<template>
  <Select label="Favorite fruit" :items="fruits" v-model="favorite" />
</template>

Demo

Favorite fruit

Small select

Props

ts

export interface SelectProps {
  items: SelectOption[]
  label?: string
  size?: SelectSize
  required?: boolean
  modelValue?: string
  placeholder?: string
  description?: string
  name?: string
}

export type SelectSize = 'default' | 'small'
export type SelectOption = {
  label: string
  value: string
}

Slots

label
description