Phone number input
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
Dropdown
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.