emailField
emailField
is a standard textField that accepts only email addresses as input.
XML Element |
|
---|---|
Java Class |
|
Attributes |
id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - autoselect - classNames - clearButtonVisible - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxLength - maxWidth - minHeight - minLength - minWidth - pattern - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - title - value - valueChangeMode - valueChangeTimeout - visible - width |
Handlers |
AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator |
Elements |
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"/>
Data Binding
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
The themeNames attribute allows you to assign a specific emailField
style from the set of predefined variants.
emailField
has several theme variants:
-
small
-
align-left
-
align-center
-
align-right
-
helper-above-field
You can find a more detailed description with examples in the corresponding section for the textField
component.
See Also
See the Vaadin Docs for more information.