text-input

Overview

text-input allows a user to type information in a text field.

Version Compatibility

text-input was introduced in version 4.72.0 of the JourneyApps Runtime.

Basic Example

<var name="job_name" type="text"/>
<text-input label="Job name" bind="job_name" required="true" />

Standard Attributes

bind

pagebind

Note:

• If the bind="" option for a text-input refers to an integer or number field or variable, a numeric keyboard will be provided.

• When bind="" refers to a field or variable of type text, it is also possible to use different keyboard types using Text Subtypes (configured on the field or variable)

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

pagealign-content

align-label

pagealign-label

clear-button-visibility

pageclear-button-visibility

disabled

pagedisabled

display

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default: unset

Override what is displayed in the text-input when the user is not editing its content.

<text-input bind="weight" label="Total weight" display="{weight} pounds"/>

enable-number-scrolling

Optional

Type: boolean

Default: false

Version compatibility

enable-number-scrolling was introduced in version 4.84.0 of the JourneyApps Runtime.

Specify whether a text-input that is bound to a number field/variable should increase and decrease the number value when a user scrolls over the input using a mouse.

Note: Prior to runtime version 4.84.0, number values will always increase/decrease with mouse scrolling in the text-input component.

error-message

pageerror-message

id

pageid

label-case

Version compatibility

label-case was introduced in version 4.80.0 of the JourneyApps Runtime.

pagelabel-case

label-color

pagelabel-color

modifier-text

pagemodifier-text

on-change

pageon-change

placeholder

pageplaceholder

required

pagerequired

show-if and hide-if

pageshow-ifpagehide-if

text-direction

Version compatibility

text-direction was introduced in version 4.86.1 of the JourneyApps Runtime.

Optional

Type: left-to-right | right-to-left

Default: left-to-right

Specify the direction of text entry into the component.

Component Methods

The following component methods are available when an id is assigned to the component and component.textInput({id:'my-id'}) is called from JS/TS:

clear

Programmatically clear a value entered into the text-input.

focus

Programmatically focus the text-input to allow the user to enter a value.

function focus(){
    component.textInput({id: 'my-id'}).focus();
}

scrollIntoView

Programmatically scroll until the text-input is visible in the view.