TextBox | X4Documentation

<TextBox> controls are used to work with text, numbers, or dates. Depending on the type of TextBox its appearance and behavior changes.

To trigger the Action "Select" when a TextBox item is deselected, a SelectAction action can be inserted within the TextBox control.

The following attributes can be defined for the <TextBox> element:

Attribute	Description
`autocomplete`	This HTML attribute specifies whether autocompletion is enabled or disabled for the TextBox. By default, the autocomplete feature is enabled. Possible values: `true` / `false`
`border`	Defines whether a frame is displayed around the control. Works only if `multiline="true"`. Possible values: `true` / `false`
`border-left`	Defines whether a left border is displayed. Works only if `multiline="true"`. Possible values: `true` / `false`
`border-right`	Defines whether a right border is displayed. Works only if `multiline="true"`. Possible values: `true` / `false`
`border-top`	Defines whether a top border is displayed. Works only if `multiline="true"`. Possible values: `true` / `false`
`border-bottom`	Defines whether a bottom border is displayed. Works only if `multiline="true"`. Possible values: `true` / `false`
`displayName`	Label of the TextBox. Data binding possible Possible values: Any string
`iconColor`	Defines the color of the icon. Data binding (color) possible Possible values: Hexadecimal color value, e.g.`ff5a00`, or expression for data binding (color) Do not use a hash in front of the color value or a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`iconPosition`	Position of the icon within the TextBox. Possible values: `prefix`: Icon is displayed at the beginning of the TextBox (default). `suffix`: Icon is displayed at the end of the TextBox.
`iconUrl`	Path to an image file or specification of a Material Icon to be used as an icon. Data binding possible The image file must be contained in the folder `Resources` directly below the web app project. Path relative to folder `Resources`. The Material Icon must be defined with the `icon` prefix, e.g. `icon:<MaterialIconName>`. Possible values: String (URI), e.g. `clock.png` `icon:<MaterialIconName>` , e.g. `icon:extension` With `Ctrl`+`Space` you get an overview of the available icons. The selection may differ from the actual available Material Icons.
`multiline`	Defines whether multi-line inputs/outputs are possible in the TextBox. Works only for the `text` type. Possible values: `true` / `false`
`rows`	Defines the visible height of the text field. Works only with multiline text fields. More lines can be entered, these are then visible via scrolling. Possible values: Integer (default: `5`)
`type`	Type of TextBox, changes behavior and appearance. Possible values: `email` : Email address `month` : Month and year with date picker `number` : Number with dial arrows (spinner) `search` : Search field `tel` : Phone number `text` (default): Text `time` : Time with dial arrows (spinner) `url` : URL `week` : Calendar week and year with date picker and dial arrows (spinner) All values containing a date or time must be stored and provided in UTC.
`value`	Content of the TextBox. Translatable Data binding possible Possible values: Any string
`background`	Defines a color for the background of the control. Data binding (color) possible This setting overwrites the default color of the color scheme! This attribute doesn't work with the `Maps` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00`, or expression for data binding (color) Do not use a hash in front of the color value! do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`enabled`	Defines if the user can interact with the control. Data binding (boolean) possible Possible values: `true` / `false` or data binding expression
`disabled`	Defines if the user can interact with the control. Data binding (boolean) possible Possible values: `true` / `false` or data binding expression
`fontFamily`	Defines the font family. Data binding (string) possible This attribute overrides the default font of the Web App for this control. If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the `fontFamily` attribute explicitly set. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: `MainFont`: Stored main font Font code from the font palette, e.g. `Font04` Expression for data binding (string)
`fontSize`	Defines the font size. Data binding (string) possible This attribute overrides the default font size of the Web App for this control. This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls. Possible values: Any integer or decimal number with a dot as decimal separator, e.g. `20`; `20.8`; `.9` Font size in pixels, e.g. `20px` Font size in points, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120` Key words: `xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger` Expression for data binding (string)
`fontStretch`	Sets the width of the single characters. Data binding (string) possible This attribute overrides the default width of the characters of the Web App for this control. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded` Expression for data binding (string) This attribute doesn't work with the `Image`, `Maps`, `Charts` and `HtmlDocument` controls.
`fontStyle`	Defines the font style. Data binding (string) possible This attribute overrides the default style of the characters of the Web App for this control. Possible values: `italic`: italic characters `normal`: normal characters (default) `oblique`: italic characters (calculated) Expression for data binding (string) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`fontWeight`	Defines the font weight. Data binding (string) possible This attribute overrides the default font weight of the Web App for this control. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight` Expression for data binding (string) This attribute doesn't work with the `Image`, `Maps` and `HtmlDocument` controls.
`foreground`	Defines a color for the foreground (texts, etc.) of the control. Data binding (color) possible This setting overwrites the default color of the color scheme! This attribute does not work with the `Map` and `HtmlDocument` controls! Possible values: Hexadecimal color value, e.g. `ff5a00`, or expression for data binding (color) Do not use a hash in front of the color value! do not use a shortened notation of the color value! Color code from the color palette of the Web App (see Theming), e.g. `A200`
`horizontalAlign`	Direction in which the elements flow. The order of the elements corresponds to their declaration. Possible values: `left` (default) `center` `right`
`textOverflow`	Defines what happens if the page is full. Possible values: `ellipsis`: Show with `...` that the text is not finished `hidden`: Break off text, paying attention to whole words `wordBreak`: Break off within the word `allow` (default): Break off text between words
`visible`	Defines if the control is visible. Data binding (boolean) possible Possible values: `true` / `false` or data binding expression

Example `<TextBox>`

The following example shows the usage of the <TextBox> tag.

XML

<FlowLayout>
	<TextBox value="Example 1"/>
	<TextBox value="Example 2" multiline="true"/>
	<TextBox value="2018-04-12" type="date"/>
</FlowLayout>

The above code creates the following TextBoxes:

Example <TextBox>

Example `<TextBox>`