Version:

Install ​

shell
npm i @mate/vue-select

Import ​

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

Variants ​

Default ​

html
<vaadin-select label="Status" helper-text="Bitte auswählen" no-vertical-overlap></MateSelect>

Required ​

html
<vaadin-select label="Pflichtfeld" required no-vertical-overlap></vaadin-select>
javascript
document.querySelector('vaadin-select').items = [{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}];
document.querySelector('vaadin-select').value = '0';

Read Only ​

html
<vaadin-select label="Nur lesen" readonly no-vertical-overlap></MateSelect>
javascript
document.querySelector('vaadin-select').items = [{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}];
document.querySelector('vaadin-select').value = '0';

Disabled ​

html
<vaadin-select label="Inaktiv" disabled no-vertical-overlap</MateSelect>
javascript
document.querySelector('vaadin-select').items = [{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}];
document.querySelector('vaadin-select').value = '0';

Invalid ​

html
<vaadin-select label="Ungültig" invalid></MateSelect>
javascript
document.querySelector('vaadin-select').items = [{label: 'Option 1', value: '0'}, {label: 'Option 2', value: '1'}];
document.querySelector('vaadin-select').value = '0';
document.querySelector('vaadin-select').errorMessage = 'Bitte eine Option auswählen.';