TALY - The Allianz Library

Input Component

1. Overview

The INPUT component provides a versatile text input field supporting various input types (text, email, number, password, etc.) with optional masking and formatting capabilities.

🛝 Use the Dynamic Form Playground to see the Input component in action and try out different configurations

2. Key Features

  • Multiple input types: text, email, number, password, tel, url, search, color
  • Input masking support (including IBAN)
  • Uppercase formatting option
  • Input prefix and suffix support
  • Character limit control
  • Translation and string interpolation support

3. Configuration Properties

Base Properties

Property Type Required Description
type 'INPUT' Yes Specifies the field type as INPUT.
id string Yes Unique identifier for the field. The field's value is stored in the form state under this key.
renderName string No Optional name added as data-render-name attribute to locate the rendered element in the DOM.
label string Yes Label text displayed above the field. Supports translation and string interpolation.
value string No The field's initial value. If set, the field will be pre-filled with this value.
hint string No Additional hint text displayed below the field.
note string No Informational note displayed when there are no errors.
infoIcon DfInfoIconConfig No Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right').
validators array No Validation rules for the field. Common types: REQUIRED, EMAIL, MIN, MAX, MIN_LENGTH, MAX_LENGTH, PATTERN. Each validator has type and optional errorMessage.
testId string No Test identifier for automated testing. Set as data-testid attribute.
acl array No Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression).
columnSpan number No Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width).
spacing string No Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (48px), 'XXL' (64px).

Component Specific Properties

Property Type Required Description
inputType string Yes The type of input element to use.
Only types supported by NDBX's Input component are permitted.
Explanations for the different kinds of input can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input Careful! When an nxMask is used, only "password", "search", "tel", "text", "url" are supported.
formatUpperCase boolean No Boolean to determine if input value needs to be formatted to uppercase
inputPrefix string No Prefix text to place at the start of this field's input.
It's translatable by default and supports string interpolation.
inputSuffix string No Suffix text to place at the end of this field's input.
It's translatable by default and supports string interpolation.
layout object No The layout of the field.
See also Layout Properties
maxLength number No The maximum number of characters allowed for user input.
nxMask NxMaskWithMaskConfig | NxMaskIbanOnlyConfig No Configuration of an ndbx input mask.
See the ndbx documentation on how to use the inputs: https://ngx-brand-kit.frameworks.allianz.io/documentation/mask/overview
See also NxMaskWithMaskConfig, NxMaskIbanOnlyConfig
optionalLabel string No Text that is additionally displayed in the label if the field is not mandatory.
placeholder string No Placeholder to be displayed in the field when the input is empty.
It's translatable by default and supports string interpolation.

NxMask Configuration (NxMaskWithMaskConfig)

Property Type Required Description
nxMask string Yes 0: digits (0 to 9 numbers) A: letters (uppercase and lowercase), digits S: letters (uppercase and lowercase) Thus, if you write 000-AAA this specifies a mask that consists of three numbers and then three letters, with a separator in the middle
convertTo string No Convert mask, e.g.
to upper case.
Default: No conversion.
dropSpecialCharacters boolean No Remove special characters in the value output.
Default: false
errorMessage string No Custom error message for validation
separators string[] No The default separators are /, (, ), ., :, -, +, , and space.
validateMask boolean No Whether the mask should be part of the validation.
Default: true

NxMask Configuration (NxMaskIbanOnlyConfig)

Property Type Required Description
isIban boolean Yes Boolean to determine if input is iban type
errorMessage string No Custom error message for validation

Layout Properties

Property Type Required Description
centerAlignInRetail boolean No Controls the field alignment for "CUSTOM_COLUMN" layout in retail journeys.
Set to true to center-align the field.
Defaults to left alignment.
Ignored in expert journeys and other pre-defined layouts, which always use left alignment.

4. Configuration Examples

Basic Text Input

{
  "id": "firstName",
  "type": "INPUT",
  "inputType": "text",
  "label": "First Name",
  "placeholder": "Enter your first name",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "First name is required"
    }
  ]
}

Email Input

{
  "id": "email",
  "type": "INPUT",
  "inputType": "email",
  "label": "Email Address",
  "placeholder": "you@example.com",
  "validators": [
    {
      "type": "REQUIRED"
    },
    {
      "type": "EMAIL"
    }
  ]
}

Input with Prefix/Suffix

{
  "id": "insuranceAmount",
  "type": "INPUT",
  "inputType": "number",
  "label": "Insurance Amount",
  "inputPrefix": "€",
  "inputSuffix": "per year"
}

Masked Input

{
  "id": "accountNumber",
  "type": "INPUT",
  "inputType": "text",
  "label": "Account Number",
  "nxMask": {
    "nxMask": "0000-0000-0000-0000",
    "dropSpecialCharacters": true
  }
}

IBAN Input

{
  "id": "iban",
  "type": "INPUT",
  "inputType": "text",
  "label": "IBAN",
  "nxMask": {
    "isIban": true,
    "errorMessage": "Please enter a valid IBAN"
  }
}

5. API Reference

For complete API documentation, see DfInputConfig.

For Aquila component documentation and design guidelines, see Input Field - Aquila Design System and Input Mask.

results matching ""

    No results matching ""