Docs

Docs

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>

Common Input Field Features

Email Field includes all Text Field and shared input field features.

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.