# Install

```shell
npm i @mate-vue/email-field
```

# Import

```vue
<script setup>
import { MateEmailField } from '@mate-vue/email-field';
</script>
```

# Variants

## Default

```vue
<template>
  <MateEmailField label="E-Mail-Adresse" placeholder="max@beispiel.de" clearButtonVisible v-model:value="email"></MateEmailField>
</template>
```

## Required

```vue
<template>
  <MateEmailField label="E-Mail-Adresse" required></MateEmailField>
</template>
```

## Disabled

```vue
<template>
  <MateEmailField label="E-Mail-Adresse" disabled v-model:value="email"></MateEmailField>
</template>
```

## Read Only

```vue
<template>
  <MateEmailField label="E-Mail-Adresse" readonly v-model:value="email"></MateEmailField>
</template>
```

## Invalid

```vue
<template>
  <MateEmailField label="E-Mail-Adresse" invalid errorMessage="Bitte eine gültige E-Mail-Adresse eingeben."></MateEmailField>
</template>
```