Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Email Field

Source: TypeScript / Java

Email Field, an extension of Text Field, only accepts email addresses as input. If the given address is invalid, the field is highlighted in red and an error message appears underneath the input.

Open in a
new tab
<vaadin-email-field
  label="Email address"
  name="email"
  value="julia.scheider@email.com"
  error-message="Enter a valid email address"
  clear-button-visible
></vaadin-email-field>

<vaadin-email-field
  label="Email address"
  name="email"
  value="This is not an email"
  error-message="Enter a valid email address"
  clear-button-visible
  invalid
></vaadin-email-field>

The validity of the email addresses is checked according to the RFC 5322 standard, which includes the format for email addresses.

Common Input Field Features

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

Pattern for Additional Validation

The pattern attribute is an additional validation criterion that you can set if, for example, a specific domain is required. 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.

Open in a
new tab
<vaadin-email-field
  label="Email address"
  name="email"
  placeholder="username@example.com"
  error-message="Enter a valid example.com email address"
  clear-button-visible
  pattern="^.+@example\\.com$"
></vaadin-email-field>

CC0AAD7F-3E1C-4A8E-A331-52F2AEDDD907