Phone Input
A composite component that allows for phone number input.
Last updated
A composite component that allows for phone number input.
Last updated
The phone input pattern is a progressive enhancement of a textbox that provides as you type phone pattern for country. The country is selected with listbox button.
Phone Input: The pattern as a whole, a composite component containing a listbox button and a textbox.
Listbox Button: The button that opens listbox of countries.
Textbox: A regular HTML text (type=tel)
Country code: The telephone dialing code of a country (e.g. +1 for United States of America)
Phone number: The telephone number excluding the country code.
Phone input group could have an accessible label.
Textbox must have an accessible label.
Textbox should not be split to multiple input boxes.
Textbox can have an attribute autocomplete=tel-national. While autocomplete is a promising technique for supporting personalization in HTML, support for this in AT is fairly limited.
This section provides interaction design for keyboard, screen reader & pointing devices.
The button must be keyboard focusable.
Listbox button and textbox sit in the page's natural tab sequence.
When Listbox button has focus, TAB key must move keyboard focus to textbox.
When textbox has focus, TAB key moves focus to the next interactive element in the page.
Field set (group label) must be announced (e.g. Phone number).
Listbox button label must be announced (e.g. Country code USA +1, Country code UK +44).
Listbox button state must be announced (e.g. expanded or collapsed).
Textbox label must be announced (e.g. 'phone number').
Clicking any listbox item must activate that item.
This section is not yet available.
Experience the pattern in action on our companion website.
View a fully styled example in our .
Listbox button label must have an accessible label. Check best practices.
