# Install

```shell
npm i @vaadin/email-field
```

# Import

```javascript
import '@vaadin/email-field';
```

# Variants

## Default

```html
<vaadin-email-field label="E-Mail-Adresse" placeholder="max@beispiel.de" clear-button-visible></vaadin-email-field>
```

```javascript
document.querySelector('vaadin-email-field').value = 'email@test.de';
```

## Required

```html
<vaadin-email-field label="E-Mail-Adresse" required></vaadin-email-field>
```

## Disabled

```html
<vaadin-email-field label="E-Mail-Adresse" disabled></vaadin-email-field>
```

```javascript
document.querySelector('vaadin-email-field').value = 'email@test.de';
```

## Read Only

```html
<vaadin-email-field label="E-Mail-Adresse" readonly></vaadin-email-field>
```

```javascript
document.querySelector('vaadin-email-field').value = 'email@test.de';
```

## Invalid

```html
<vaadin-email-field label="E-Mail-Adresse" invalid></vaadin-email-field>
```

```javascript
document.querySelector('vaadin-email-field').value = 'email@test.de';
document.querySelector('vaadin-email-field').errorMessage = 'Bitte eine gültige E-Mail-Adresse eingeben.';
```