Version:

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