Home / Designing UI Elements

Phone Input

Tech Writers Team @ Ucraft

Last updated on Sep 10, 2024

The Phone Input UI element is designed for phone number input, allowing users to enter their phone numbers into a form. The UI element consists of a placeholder text (see Input) and country code selection (see Dropdown).

To configure Phone Input:

  1. Select the current condition of the element from the State dropdown on the right-side Properly Panel:
    • Normal: The default state of Phone Input when it is not being interacted.
    • Hover: The state of Phone Input when the user hovers over it with the mouse cursor.

2. Select how it behaves based on certain conditions or user interactions from the Mode dropdown:

  • Normal: The default state of Phone Input when it is not being interacted.
  • Error: The state of Phone Input when the users' input does not meet the specified criteria, such as an incorrect phone number provided, or other inconsistencies.

3. Make the necessary configuration of principal styling features (see Global Styles).


💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.