Email Field
An extension of Text Field, this field only accepts email addresses as input.
If a given email address is invalid, the field is highlighted in red and an error message appears underneath the input.
<HorizontalLayout theme="spacing">
<EmailField
label="Email address"
value="julia.scheider@example.com"
errorMessage="Enter a valid email address"
clearButtonVisible
/>
<EmailField
label="Email address"
value="This is not an email"
errorMessage="Enter a valid email address"
clearButtonVisible
invalid
/>
</HorizontalLayout>
Pattern for Extra Validation
The pattern attribute is an additional validation criterion. You might set this, for example, if you want to require a specific domain. The pattern is specified using a regular expression.
The example below uses the pattern .+@example\.com
and only accepts addresses in the example.com
domain:
<EmailField
label="Email address"
value="julia@example.com"
errorMessage="Enter a valid email address"
pattern="^.+@example\.com$"
/>
Important
| You can find more information in the corresponding article on vaadin.com. |