# 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.';
```