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
Standard Attributes
bind
bindbind
Note:
If the
bind=""
option for atext-input
refers to aninteger
ornumber
field or variable, a numeric keyboard will be provided.When
bind=""
refers to a field or variable of typetext
, it is also possible to use different keyboard types using Text Subtypes (configured on the field or variable)
label
labellabel
required
requiredrequired
Advanced Attributes
align-content
align-contentalign-content
align-label
align-labelalign-label
clear-button-visibility
clear-button-visibilityclear-button-visibility
disabled
disableddisabled
display
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.
enable-number-scrolling
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-messageerror-message
id
idid
label-case
label-case
Version compatibility
label-case
was introduced in version 4.80.0 of the JourneyApps Runtime.
label-color
label-colorlabel-color
modifier-text
modifier-textmodifier-text
on-change
on-changeon-change
placeholder
placeholderplaceholder
required
requiredrequired
show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
text-direction
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
clear
Programmatically clear a value entered into the text-input
.
focus
focus
Programmatically focus the text-input
to allow the user to enter a value.
scrollIntoView
scrollIntoView
Programmatically scroll until the text-input
is visible in the view.
Last updated