Phone number input

figma:ready
scss:ready
vue:ready
Usage
Code
Accessibility

Import

Import the settings, the text-input and the phone-number scss files.


@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.phone-number';

Usage

A phone number input is composed of 2 main zones:

  • A dropdown with the class : mc-phone-number__dropdown
  • _A number input _ with the class : mc-phone-number__input

<div class="mc-phone-number">
<div class="mc-phone-number__dropdown">
<button
type="button"
aria-haspopup="listbox"
aria-labelledby="dropdown_country"
id="dropdown_country"
class="mc-phone-number__button"
>
<svg class="mc-phone-number__flag">
<use xlink:href="#flag" />
</svg>
<span class="mc-phone_number__indicator">+33</span>
</button>
<ul
id="phone_number_list"
tabindex="-1"
role="listbox"
aria-labelledby="phone_number_list"
class="mc-phone-number__list mc-phone-number__list--hidden"
>
<li id="FR" role="option" class="mc-phone-number__item">
<svg class="mc-phone-number__flag">
<use xlink:href="#flag" />
</svg>
<span class="mc-phone-number__country">France, </span>
<span>+33</span>
</li>
</ul>
</div>
<input
type="text"
class="mc-phone-number__input mc-text-input mc-text-input--m"
id="smallField"
placeholder="00 00 00 00 00"
name="example-small"
/>
</div>

Detail of areas

The dropdown contains:

  • The dropdown trigger (mc-phone-number__button)
  • The list of the countries available (mc-phone-number__list)

Each element of list contains:

  • The country flag (mc-phone-number__flag)
  • The country name (mc-phone-number__country)
  • The country indicator (mc-phone-number__country)

Javascript behaviour

Useful tip

The javascript to manage the dropdown is based on the listbox from W3C

To have a fully fonctionnal phone number input, make sure to add the following script to your code.

listbox.js


utils.js

On the dropdown opening add the mc-phone-number--focused class and remove the mc-phone-number__list--hidden class.