Email Input (ALPHA)

BusinessEnterprise

Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Email Input widget is a text field for an email address. It checks that the value looks like an email address. You can add your own regular expression on top of that check.

The Email Input has the same properties as the Input widget, with Data type set to Email.

Widget type: WDS_EMAIL_INPUT_WIDGET

Email Input widget

Content properties

These properties appear in the Content tab of the property pane.

Type

Data type string

Sets the type of data the field takes. For this widget it is Email. Options:

• Single-line text
• Multi-line text
• Number
• Password
• Email
• Phone number
• Currency
• Date

When you pick a different type, the widget changes into the matching widget. For example, Single-line text changes it into an Input.

Data

Value string

Sets the starting text of the field. When this value changes, the field updates to the new value. Numbers are turned into text.

Example:

{{AnvilTable1.selectedRow.email}}

Label

Text string

The label shown above the field. Default: Label.

Validation

This section shows only when Readonly is off.

Required boolean

Makes the field mandatory. If a user clears the field, it shows "This field is required." Off by default.

Regex string

Checks the value against a regular expression. If the value does not match, the field is invalid and shows Error message. The value must also pass the built-in email format check.

Example:

@example\.com$

Valid boolean

Sets whether the value is valid, using a JavaScript expression. If the expression returns false, the field is invalid and shows Error message. Default: true.

Example:

{{EmailInput1.text !== "test@example.com"}}

Error message string

The message shown when the Regex or Valid check fails.

General

Allow autofill boolean

Lets the browser fill in saved values. Off when you add the widget from the widget pane. It turns on when you switch Data type to Email or Password.

Tooltip string

Adds a help icon next to the label. Users see this text when they open the help icon.

This property shows only when Readonly is off.

Placeholder string

Text shown inside the field when it is empty.

This property shows only when Readonly is off.

Visible boolean

Controls whether the widget shows in the app. On by default.

Disabled boolean

Stops users from typing in the field. Off by default.

This property shows only when Readonly is off.

Readonly boolean

Lets users select the value but not change it. Readonly takes priority over Disabled. Off by default.

When you turn this switch on in the property pane, the widget changes into a KeyValue widget that shows the value as read-only text. When you turn it off, the widget changes back to the type set in Data type.

Animate loading boolean

Shows a loading animation while the widget loads. On by default.

Auto focus boolean

Puts the cursor in the field when the page loads. Off by default.

This property shows only when Readonly is off.

Style properties

These properties appear in the Style tab of the property pane.

Icon

Icon string

Adds an icon inside the field. Pick an icon from the list, or bind an icon name.

Position string

Sets which side of the field the icon is on: left (default) or right.

This property shows only when you have picked an Icon.

Reference properties

Reference properties let you read the widget's state in bindings and code, for example {{EmailInput1.isVisible}}. You cannot set them directly.

text string

The current value of the field.

Example:

{{EmailInput1.text}}

rawText string

The value exactly as the user typed it.

Example:

{{EmailInput1.rawText}}

isValid boolean

Is true when the value passes all checks: Required, Regex, Valid, and the email format check. An empty field that is not required is valid.

Example:

{{EmailInput1.isValid}}

isVisible boolean

Shows whether the widget is visible.

Example:

{{EmailInput1.isVisible}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{EmailInput1.isDisabled}}

isReadOnly boolean

Shows whether the widget is read-only.

Example:

{{EmailInput1.isReadOnly}}

Methods

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise

Shows or hides the widget.

Example:

EmailInput1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns Disabled on or off.

Example:

EmailInput1.setDisabled(false)

setReadOnly (param: boolean): Promise

Turns Readonly on or off.

Example:

EmailInput1.setReadOnly(true)

setRequired (param: boolean): Promise

Turns Required on or off.

Example:

EmailInput1.setRequired(true)

setValue (param: string): Promise

Sets the value of the field.

Example:

EmailInput1.setValue("ada@example.com")

Events

The Events section shows only when Readonly is off.

onTextChanged

Runs each time the user changes the text.

onFocus

Runs when the field gets focus.

onBlur

Runs when the field loses focus.

onSubmit

Runs when the user presses Enter. It runs only when the value is valid.

Reset on submit boolean

This setting appears in the Events section. When it is on, the field clears after onSubmit runs without errors. On by default.