Definition
The phone input component allows the users to introduce a phone number, giving them a concrete pattern and prefix depending on the selected country.
The user can also set a complete phone number (including the prefix) and the component detects the country and sets it.
Handlebars
Razor
Open in new tabJavascript
With current value
The phone input allows to set an initial value to the component, for example, to show a field with your saved phone number. There is some logic done to handle already formatted values to the component, in order to detect the country and clean number.
If current value has a country prefix that exists but isn't the first item, the phone input selects automatically the correct country from the dropdown and removes the prefix from the number in the text input.
Handlebars
Razor
Open in new tabJavascript
Toggle development mode to view different cases.
Same behavior is expected when number has zero zero prefix.
If current value only has a leading 0, we assume country is the first in the list. The number is shown as it is in the text input - although when retrieving it, we remove leading zero unless the country is "it" or "ie".
Whole number untouched in the text input.
If current value has a country prefix that it's not in the configured list, we maintain the whole number untouched in the text input.
Same behavior is expected when number has zero zero prefix.
States
The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.
In some cases, the phone input is not disabled at component level but instead one ancestor is marked as disabled. This is mainly done when loading data to let the users know that the component is not useful at that moment.
The success state let the user know that the filled information is correct.
The warning state let the user know that the filled information has an issue.
The error state let the user know that the filled information has an error.
Modifiers
The highlighted modifier changes the color when an option is selected.
It is used in contexts when is useful to let the users know that an options is choosen (i.e. search filters or booking steps).