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
| 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 or number | No | The field's initial value. Use string for all input types except number. Use number when inputType is "number". |
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). See Overriding the number of grid columns when using --df-custom-columns. |
spacing | string | No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
| 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. |
| 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 |
| Property | Type | Required | Description |
|---|---|---|---|
isIban | boolean | Yes | Boolean to determine if input is iban type |
errorMessage | string | No | Custom error message for validation |
| 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. |
{
"id": "firstName",
"type": "INPUT",
"inputType": "text",
"label": "First Name",
"placeholder": "Enter your first name",
"validators": [
{
"type": "REQUIRED",
"errorMessage": "First name is required"
}
]
}{
"id": "email",
"type": "INPUT",
"inputType": "email",
"label": "Email Address",
"placeholder": "you@example.com",
"validators": [
{
"type": "REQUIRED"
},
{
"type": "EMAIL"
}
]
}{
"id": "insuranceAmount",
"type": "INPUT",
"inputType": "number",
"label": "Insurance Amount",
"inputPrefix": "€",
"inputSuffix": "per year"
}{
"id": "accountNumber",
"type": "INPUT",
"inputType": "text",
"label": "Account Number",
"nxMask": {
"nxMask": "0000-0000-0000-0000",
"dropSpecialCharacters": true
}
}{
"id": "iban",
"type": "INPUT",
"inputType": "text",
"label": "IBAN",
"nxMask": {
"isIban": true,
"errorMessage": "Please enter a valid IBAN"
}
}For complete API documentation, see:
For Aquila component documentation and design guidelines, see Input Field - Aquila Design System and Input Mask.