emailField

Basics

The emailField component is a specialized input field designed for collecting and validating email addresses. It extends the basic textField component, adding specific functionalities and validations tailored for emails.

An example of emailField:

<emailField errorMessage="Enter a valid email address"
            value="john.doe@email.com"
            clearButtonVisible="true"
            label="Email address"
            width="15em"/>
email field basics

Data Binding

LIVE DEMO

Data binding refers to linking a visual component to a data container. Changes in the visual component or corresponding data container can trigger updates to one another. See Using Data Components for more details.

The following example produces a data-aware emailField.

<data>
    <instance class="com.company.onboarding.entity.Customer" id="customerDc"> (1)
        <fetchPlan extends="_base"/> (2)
        <loader id="customerDl"/>
    </instance>
</data>
<layout>
    <emailField dataContainer="customerDc"
                property="email"
                label="Email"/> (3)
</layout>
1 InstanceContainer for the Customer entity.
2 Inline fetch plan of the entity instance located in the container.
3 Binding the component to a data container and property. The dataContainer attribute contains a link to the customerDc data container, and the property attribute refers to the email entity attribute.

Theme Variants

LIVE DEMO

Use themeNames attribute to set a component theme.

Variant Description Supported By

small

Makes the component smaller.

Aura, Lumo

align-left

Aligns the field value to the left side.

Aura, Lumo

align-center

Centers the field value.

Aura, Lumo

align-right

Aligns the field value to the right side.

Aura, Lumo

helper-above-field

Renders the helper text above the field, below the label.

Aura, Lumo

Validation

To check values entered into the emailField component, you can use a validator in a nested validators element.

The following predefined validators are available for emailField:

XML Element

validators

Predefined validators

custom - email - notBlank - notEmpty - notNull - regexp - size

See Also

See the Vaadin Docs for more information.