# 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>
```