Input Component

Description

The input widget is used to collect textual (string) and numeric (number) data in the Elastic-UI. Inputs can be customized with a set of optional attributes in the XSLT. Logical groupings, component behavior, and reactive layouts can all be manipulated.

Component Attributes

NameDefaultRequired (Y/N)Extra
nameYThe name attribute needs to be unique for each component. When values are returned from the user, the data will be stored in a key-value-pair and made available in Form and Flow XSL files via outgoing context.
typeY“string” or “number” are valid values.
titleNLabel for the widget. Setting the value to “hidden” has the same result as leaving it empty.
groupNAssigns a logical grouping to a single multiple components that allow them to be resized using reactive breakpoints. This is required for colSize to work.
colSizecol-12NComma separated string of reactive breakpoints and the number of grid spaces acquired by the widget. group must be present in order for this to work. e.g. “col-12, col-sm-8, col-md-6, col-lg-4, col-xl-3”
iconNString name of an icon from the Ionic Icons v3 collection. e.g. “md-add”
submitNBoolean that indicates whether or not the current form should be submitted to the server/engine. Often used to submit data entered by a user. When a component submits, there will be a corresponding action present in the outgoing flow context with the value of the name attribute. e.g. outgoing/action=”myComponent”
requiredNIndicates whether a value is required in order to progress. Can be checked on the client or server side. Adds an asterisk to the label
minLengthNSets the smallest number of characters or digits allowed in the widget. If there are fewer characters inside the focused widget, an error message is displayed beneath the input.
maxLengthNLimits the number of characters or digits that can be entered into the widget. The widget will not allow the user to enter more than the number specified.
audioTextNOnly available for mobile builds of the UI (Android or iOS). When the widget gains focus, the value of this attribute will be spoken from the device to the user. Requires Text-To-Speech (TTS) enabled in the user settings.
patternNSpecify a regular expression (REGEX) that the input must follow. When this pattern is not followed by the user, an error message will appear under the input widget.
readOnlyfalseNDisables the ability for users to manipulate the data displayed by this widget.
placeholderNDisplay some text inside of the input area of the widget. When the user enters data, this text is overwritten. Used to provide user hints.
maskedfalseNWhen set to “true”, causes the user values of an input widget to be represented as a series of ellipse. THIS DOES NOT ENCRYPT THE DATA! The value of the widget is still collected, validated, and transported as plain-text. This attribute is simply designed to obscure human vision of an input value.
matchValueNTakes a single value, which is the name of another property. It compares the value of the current widget to the value of the widget for which the match has been indicated. A common example would be collecting an email address or password; where the form needs to validate that the values of the two widgets are the same.
afterNTakes a single value, which is the name of another property. An error will be displayed if you try to submit the form without entering a value into the widget which must be filled before this one. A good example is an email or password verification form; the widget will only be available after the mentioned component has a value
clearInputfalseNIf true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
clearOnEditfalseNIf true, the value will be cleared after focus upon edit.
focusfalseNBoolean that indicates whether this field should become focused automatically when the form renders. Only one focus can occur at a time.
shortcutKeyNString that specifics the a quick way to interact with the component. For input fields this causes focus to occur. For buttons/actions this causes a submit to occur. e.g. “F1” or “ctrl+t”

Value Comparison Attributes

NameDefaultRequired (Y/N)Extra
compareValidationfalseNBoolean that indicates whether or not a validation needs to be completed for this component.
greaterThanNTakes the name of another property and attempts to compare, returns boolean state of the validation and shows errorMessage when validation fails
greaterThanEqualToNTakes the name of another property and attempts to compare, returns boolean state of the validation and shows errorMessage when validation fails
lessThanNTakes the name of another property and attempts to compare, returns boolean state of the validation and shows errorMessage when validation fails
lessThanEqualToNTakes the name of another property and attempts to compare, returns boolean state of the validation and shows errorMessage when validation fails
equalToNTakes the name of another property and attempts to compare, returns boolean state of the validation and shows errorMessage when validation fails
errorMessageNText to display in the case that any type of validation fails for this specific widget

Code Examples

<property
  name="min"
  title="Enter Name"
  type="string"
  submit="true" />

<property
  name="max"
  title="Enter age"
  type="number"
  minLength="3" />

<property
  name="password"
  title="Password"
  type="string"
  masked="true"
  regex="[a-zA-Z]"
  minLength="3" />
<property
  name="passwordInput" 
  title="Password" 
  type="string" 
  masked="true" />
<property
  name="passwordValidation"
  title="Re-Enter Password" 
  type="string" 
  masked="true" 
  matchValue="passwordInput" 
  after="passwordInput" />
Updated on March 25, 2022

Was this article helpful?

Related Articles