Version:

Install ​

shell
npm i @mate-vue/select

Import ​

vue
<script setup>
import { MateSelect } from '@mate-vue/select';
</script>

Variants ​

Default ​

vue
<template>
  <MateSelect label="Status" helperText="Bitte auswählen" :items="[{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}, {label: 'Option 3', value: '2'}]" v-model:value="selected" no-vertical-overlap></MateSelect>
</template>

Required ​

vue
<template>
  <MateSelect label="Pflichtfeld" required :items="[{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}]" no-vertical-overlap></MateSelect>
</template>

Read Only ​

vue
<template>
  <MateSelect label="Nur lesen" readonly :items="[{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}]" v-model:value="selected"></MateSelect>
</template>

Disabled ​

vue
<template>
  <MateSelect label="Inaktiv" disabled :items="[{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}]" v-model:value="selected"></MateSelect>
</template>

Invalid ​

vue
<template>
  <MateSelect label="Ungültig" invalid errorMessage="Bitte eine Option auswählen." :items="[{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}]" v-model:value="selected"></MateSelect>
</template>