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

bind

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

label

required

required

Advanced Attributes

align-content

align-content

align-label

align-label

clear-button-visibility

clear-button-visibility

disabled

disabled

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

error-message

id

id

label-case

Version compatibility

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

label-case

label-color

label-color

modifier-text

modifier-text

on-change

on-change

paragraph-resize-mode

Version compatibility

paragraph-resize-mode was introduced in version 4.89.17 of the JourneyApps Runtime.

Optional

Type: auto | manual | none

Default: manual

Specify in what way paragraph text inputs should be resizable. This attribute is only applied if the bind field is of type text:paragraph.

• auto: The input will automatically resize to fit the text, limited by the height attributes below.

• manual: The user is in control of the height of the input (not available on mobile devices).

• none: No resizing will occur, will only use the height attributes below.

paragraph-height-min

Version compatibility

paragraph-height-min was introduced in version 4.89.17 of the JourneyApps Runtime.

Optional

Type: number

Default: 50

Specify the minimum height of the text-input. This attribute is only applied if the bind field is of type text:paragraph.

paragraph-height-max

Version compatibility

paragraph-height-max was introduced in version 4.89.17 of the JourneyApps Runtime.

Optional

Type: number

Default: null (no limit)

Specify the maximum height of the text-input. This attribute is only applied if the bind field is of type text:paragraph.

paragraph-height

Version compatibility

paragraph-height was introduced in version 4.89.17 of the JourneyApps Runtime.

Type: number

Default: null (no limit)

Shorthand to set both paragraph-height-min and paragraph-height-max. Overridden if the these two attributes are also present. This attribute is only applied if the bind field is of type text:paragraph.

placeholder

placeholder

required

required

show-if and hide-if

show-ifhide-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.