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 Input widget is a text field for one line of text, such as a name or a title. You can mark it as required, check it with a regular expression, and run actions when the text changes or the user presses Enter.

For other kinds of data, use Email Input, Password Input, Number Input, Multiline Input, Phone Input, or Currency Input. You can also switch between them with Data type.

Widget type: WDS_INPUT_WIDGET

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 Single-line text. 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, Email changes it into an Email 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.name}}

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.

Max characters number

Sets the most characters a user can enter. Must be a whole number of 1 or more. If the text is too long, the field shows "Input text length must be less than N characters."

Spellcheck boolean

Lets the browser check the text for spelling errors. You cannot bind this property with JavaScript.

Regex string

Checks the value against a regular expression. If the value does not match, the field is invalid and shows Error message.

Example:

^[A-Za-z ]+$

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:

{{Input1.text !== "admin"}}

Error message string

The message shown when the Regex or Valid check fails.

General

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 {{Input1.isVisible}}. You cannot set them directly.

text string

The current value of the field.

Example:

{{Input1.text}}

rawText string

The value exactly as the user typed it.

Example:

{{Input1.rawText}}

isValid boolean

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

Example:

{{Input1.isValid}}

isVisible boolean

Shows whether the widget is visible.

Example:

{{Input1.isVisible}}

isDisabled boolean

Shows whether the widget is disabled.

Example:

{{Input1.isDisabled}}

isReadOnly boolean

Shows whether the widget is read-only.

Example:

{{Input1.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:

Input1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns Disabled on or off.

Example:

Input1.setDisabled(false)

setReadOnly (param: boolean): Promise

Turns Readonly on or off.

Example:

Input1.setReadOnly(true)

setRequired (param: boolean): Promise

Turns Required on or off.

Example:

Input1.setRequired(true)

setValue (param: string): Promise

Sets the value of the field.

Example:

Input1.setValue("Ada Lovelace")

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.