Skip to main content

Phone Number

The Phone Number component provides a field for users to enter telephone numbers. It includes validation features to ensure the input matches standard phone number formats, which is crucial for contact information accuracy.

Phone Number

The options available to configure the URL component are separated into four categories:

  • Display
  • Data
  • Validation
  • Conditional

Display

ParameterDescription
LabelText label that appears next to the input field.
PlaceholderPlaceholder text displayed when the field is empty.
DescriptionAdditional guidance text shown below the input.
TooltipHelper text displayed on hover for quick hints.
PrefixText or symbol shown before the input (e.g., @, $).
SuffixText or symbol shown after the input (e.g., .com, kg).
Input MaskPattern to guide phone number entry (e.g., (999) 999-9999).
Display MaskFormat used when displaying the input.
Allow Multiple MasksEnables support for several formats.
Custom CSS ClassPattern used to format user input visually as they type.
AutocompleteEnables or disables browser autocomplete suggestions.
HiddenKeeps the component data but hides it from the user view.
Hide LabelHides the field label on the rendered form.
Hide InputHides the input field from the UI (data is still captured).
Initial FocusSets this field as the first one focused when the form loads.
Allow SpellcheckEnables the browser's built-in spellchecking.
DisabledPrevents the user from editing the input field.

Data

ParameterDescription
Multiple ValuesAllows users to input more than one email address in this field.
Default ValuePre-populates the field with a default value when the form loads. Note that this will override the placeholder text.
Text CaseSets how text is formatted: Mixed (default), Uppercase, or Lowercase.
Truncate Multiple SpacesCollapses multiple spaces into a single space within the input.
Clear Value When HiddenAutomatically clears the field's value if the component becomes hidden.

Validation

ParameterDescription
RequiredMakes this field mandatory before form submission.
UniqueEnsures the entered value has not been submitted before.
Validate When HiddenValidates the field even when it’s not visible on the form.
Error LabelCustom label shown when a validation error occurs.
Custom Error MessageDisplays a personalized message when the field fails validation.

Conditional

ParameterDescription
This Component should displayTrue - the component will display in the form.
False - the component will not display.
When the form componentSelect what component within the form will execute the condition. For example, Submit.
Has the valueThe data entry of the field that executes the condition.