emailField

emailField is a standard textField that accepts only email addresses as input.

XML Element

emailField

Java Class

JmixEmailField

Basics

LIVE DEMO

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 id="emailField" label="EmailField"/>

Data-aware emailField

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 id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <emailField id="emailField" label="Field connected to a container" width="15em"
                     dataContainer="customerDc" property="email"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

The customerDc instance container holds a Customer entity. The dataContainer and property attributes bind the component to its email attribute.

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

Theme Variants

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

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

Attributes

The following attributes are specific to emailField:

Name Description Default

autoselect

Controls whether text is selected automatically when the field receives focus.

—

clearButtonVisible

Controls whether the field displays a clear button.

false

The following shared attributes are supported by emailField:

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - classNames - 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

The following handlers are specific to emailField:

Name Description

validator

Validates the component value.

The following shared handlers are supported by emailField:

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

Elements

An emailField can include prefix, suffix, tooltip, and validator as its nested elements.

See Also