Textbox

Live demos in the Inputs/String menu entry.

Renders a text input field.

Node name : textbox

Attributes

Bound

Attribute	Type	Required	Default value	Description
property-name	string	true		UI view property name
item	UI view	false	@DatasourceCurrent	Item to be bound to

Unbound

Attribute	Type	Required	Default value	Description
value	string	true		Input value.
label	string	false		Input label.
placeholder	string	false		Placeholder specifies a short hint that describes the expected value of an input field. The short hint is displayed in the input field before the user enters a value.
disabled	bool	false	false	Value indicating whether the input is disabled
readonly	bool	false	false	Value indicating whether the input is read-only.
required	bool	false	false	Value indicating whether the input is required.
message-text	string	false		Additional message displayed next to the component. Usually a warning or an error message.
message-severity	string (information, warning, error)	false		Severity of the additional message displayed next to the component.
documentation	string	false		Documentation
tab-stop	bool	false	true	Value indicating whether the input can be focused using the Tab key.
value-changed	string	false		Name of the method called when the value has changed. The first parameter is the value and the second is the current item of the data source (DatasourceCurrent) or the iterated item in a repeat component.
max-length	int	false		The maximum number of characters allowed in the input (text type only)
multi-lines	bool	false	false	Value indicating whether the input is multi-lines (text type only)
character-casing	string (normal, lower-casing, upper-casing, camel-casing, pascal-casing)	false	normal	Used to define the character casing of the value entered. To find out more about the character casing, please visit this article.
white-space-handling	string (no-leading-and-trailing-white-space, no-leading-white-space, no-trailing-white-space, no-white-space)	false		Used to define the white space handling of the value entered. To find out more about the white space handling, please visit this article.

Common

Attribute	Type	Required	Default value	Description
label-position	string (top, left, right, hidden)	false	top	Input label position.
message-position	string (bottom, hidden)	false	bottom	Input message position.
focused	bool	false	false	Value indicating whether the component is focused.
type	string (text, password, mask)	false	text	Value type.
placeholder	string	false		Placeholder
update-mode	string (default, immediate)	false	default	Determines when the new value is emitted. In default mode, the value is emitted on change (e.g. when pressing Enter or blurring the input). When set to immediate, the value is emitted on each keystroke.
clear	bool	false	false	Value indicating whether the clear button is visible (text type only)
speech	bool	false	false	Value indicating whether the speech-to-text button is visible (text type only)
rows	int	false	10	The visible height of the input in lines when the input is multi-lines (text type only)
revealable	bool	false	true	Value indicating whether the password is revealable (password type only)
mask	string	true		The mask (mask type only)
value-mode	string (raw, formatted)	false	raw	The mode of the value that will be bound and persisted (mask type only) . raw means that the value in the bounded property does not include the mask formatting, formatted means that the value in the bounded property includes the value formatted with this mask.

Examples

Bound

Simple text

In the following example, we can set the CustomerName property value.

<textbox property-name="CustomerName" />

Mask

In the following example, we can set the CustomerPhone property value. The value will be formatted according to the specified mask. The mask syntax is detailed in the "Mask special characters" section. The persisted value will be the raw value which means there will be no space between the numbers.

Password

In the following example, we can set the ApiKey property value. The value will be visually hidden but can be revealed by clicking on the "eye" button.

<textbox property-name="ApiKey" type="password" />

Unbound

Simple text

In the following example, we can set the CityCode field. The label of the textbox is defined is a resource metadata.

<textbox value="@Fields.CityCode" label="@Resources.MyModule.CityCodeCaption" />

Mask

In the following example, we can set the Serial field. The label of the textbox is defined is a resource metadata. The value will be formatted according to the specified mask. The mask syntax is detailed in the "Mask special characters" section. The persisted value will be the formatted value which means there will be the dashes.

Password

In the following example, we can set the UserPassword field. The label of the textbox is defined is a resource metadata. The field value will be visually hidden. The "eye" button to reveal the value will not be visible. Please note that the value can still be accessed on the client side even if the reveal button is disabled.

<textbox value="@Fields.UserPassword" label="@Resources.MyModule.UserPasswordCaption" type="password" reveleable="false" />

Mask special characters

The mask must be a string composed of one or more of the masking elements, as shown in the following table.

Character	Mask Type
0	Digit.
9	Digit or space.
#	Digit, sign, or space.
L	Letter
l	Letter or space.
A	Alphanumeric.
a	Alphanumeric or space.
.	Localized decimal point.
,	Localized thousand separator.
:	Localized time separator.
/	Localized date separator.
$	Localized currency symbol.
<	Converts characters that follow to lowercase.
>	Converts characters that follow to uppercase.
\	Escapes any character, turning it into a literal.
All others	Literals.