TALY - The Allianz Library

Phone Input Component

1. Overview

The PHONE_INPUT component provides a specialized input field for phone numbers with country code selection and validation.

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

2. Key Features

  • International phone number input with country code selection
  • Built-in phone number validation
  • Customizable area code and line number labels
  • Default country code configuration
  • Translation and string interpolation support
  • Custom error messaging

3. Configuration Properties

Base Properties

PropertyTypeRequiredDescription
type'PHONE_INPUT'YesSpecifies the field type as PHONE_INPUT.
idstringYesUnique identifier for the field. The field's value is stored in the form state under this key.
renderNamestringNoOptional name added as data-render-name attribute to locate the rendered element in the DOM.
labelstringYesLabel text displayed above the field. Supports translation and string interpolation.
valuestringNoThe field's initial value including country code (e.g., "+49123456789"). If set, the field will be pre-filled with this value.
hintstringNoAdditional hint text displayed below the field.
notestringNoInformational note displayed when there are no errors.
infoIconDfInfoIconConfigNoInfo icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right').
validatorsarrayNoValidation rules for the field. Common types: REQUIRED, PATTERN, MIN_LENGTH, MAX_LENGTH. The component has built-in phone number validation based on country. Each validator has type and optional errorMessage.
testIdstringNoTest identifier for automated testing. Set as data-testid attribute.
aclarrayNoAccess control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression).
columnSpannumberNoNumber 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.
spacingstringNoMargin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px).

Component Specific Properties

PropertyTypeRequiredDescription
areaCodeLabelstringNoSet the text at the top of the dropdown and aria-label of area code field. The default value is 'Area Code'.
countryCodestringNoThe default country code for the phone input.
errorMessagestringNoCustom error message for validation
lineNumberLabelstringNoThe aria-label of line number field.
placeholderstringNoPlaceholder to be displayed in the field when the input is empty.
It's translatable by default and supports string interpolation.

4. Configuration Examples

Basic Phone Input

Example :
{
  "id": "phoneNumber",
  "type": "PHONE_INPUT",
  "label": "Phone Number",
  "placeholder": "Enter your phone number",
  "countryCode": "DE",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Phone number is required"
    }
  ]
}

Phone Input with Custom Labels

Example :
{
  "id": "contactNumber",
  "type": "PHONE_INPUT",
  "label": "Contact Number",
  "placeholder": "Enter phone number",
  "countryCode": "DE",
  "areaCodeLabel": "Country Code",
  "lineNumberLabel": "Phone Number",
  "validators": [
    {
      "type": "REQUIRED"
    }
  ]
}

Phone Input with Custom Error Message

Example :
{
  "id": "emergencyContact",
  "type": "PHONE_INPUT",
  "label": "Emergency Contact",
  "placeholder": "Enter phone number",
  "countryCode": "AT",
  "errorMessage": "Please provide a valid emergency contact number",
  "validators": [
    {
      "type": "REQUIRED"
    }
  ]
}

Phone Input with Custom Pattern Validation

Example :
{
  "id": "germanPhoneNumber",
  "type": "PHONE_INPUT",
  "label": "German Phone Number",
  "placeholder": "Enter German phone number",
  "countryCode": "DE",
  "validators": [
    {
      "type": "PATTERN",
      "pattern": "^\\+49[0-9]{10,11}$",
      "errorMessage": "Must be a German phone number starting with +49"
    },
    {
      "type": "REQUIRED",
      "errorMessage": "Phone number is required"
    }
  ]
}

Phone Input with Prefilled Value

Example :
{
  "id": "businessPhone",
  "type": "PHONE_INPUT",
  "label": "Business Phone",
  "placeholder": "Enter business phone",
  "value": "+49301234567",
  "countryCode": "DE",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Business phone is required"
    }
  ]
}

5. API Reference

For complete API documentation, see DfPhoneInputConfig.

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

results matching ""

    No results matching ""