sunweb

Phone Input

component phone input phone input form-element

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.

c-phone-input

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
Loading...

Javascript

Loading...

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.


c-phone-input with +31 prefix (not 1st in list)

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

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
Loading...

Javascript

Loading...

Toggle development mode to view different cases.

c-phone-input with 0031 prefix (not 1st in list)

Same behavior is expected when number has zero zero prefix.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
c-phone-input with leading 0

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".

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
c-phone-input no prefix or leading 0

Whole number untouched in the text input.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
c-phone-input with +81 prefix (not in list)

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.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
c-phone-input with 0081 prefix (not in list)

Same behavior is expected when number has zero zero prefix.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41

States


c-phone-input > .is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
.is-disabled > c-phone-input

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.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41

c-phone-input > .has-success

The success state let the user know that the filled information is correct.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41

c-phone-input > .has-warning

The warning state let the user know that the filled information has an issue.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41

c-phone-input > .has-error

The error state let the user know that the filled information has an error.

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41
Phone is Required
Field cannot be empty

Modifiers


c-phone-input > .c-phone-input--highlighted

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).

Handlebars

Belgium +32
Denmark +45
Finland +358
Netherlands +31
Norway +47
Sweden +46
Italy +39
Swiss +41