Phone Input Component
Default Phone input
Use the phone-input class to create the default phone input. The phone input consists of a listbox button and a textbox with type=tel . The listbox button is used to select the country code and the textbox is used to enter the local phone number.
+1
<span class="phone-input">
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form btn--split-start"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
aria-label="Country: United States of America"
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--al"
aria-hidden="true"
data-country-code="355"
/>
<span> Albania </span>
<span> (+355) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--in"
aria-hidden="true"
data-country-code="91"
/>
<span> India </span>
<span> (+91) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--sh"
aria-hidden="true"
data-country-code="290"
/>
<span> Saint Helena, Ascension and Tristan da Cunha </span>
<span> (+290) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--gb"
aria-hidden="true"
data-country-code="44"
/>
<span> United Kingdom </span>
<span> (+44) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-0"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-0"
/>
</span>
</span>
With Group Label
Use ARIA to provide a grouping role, similar to fieldset and legend, for more flexibility when using field classes. For label inline usage, please see the field module .
+1
<span class="field" role="group" aria-labelledby="phone-number-label-1">
<label class="field__label field__label--stacked" id="phone-number-label-1">
Phone number
</label>
<span class="phone-input">
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form btn--split-start"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
aria-label="Country: United States of America"
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" data-country-code="355" />
<span> Albania </span>
<span> (+355) </span>
</span>
<svg
class="icon icon--16"
height="10"
width="14"
aria-hidden="true"
>
<use href="#icon-tick-16" />
</svg>
</div>
...
<div
class="listbox-button__option"
role="option"
aria-selected="true"
>
<span class="listbox-button__value">
<span class="fflag fflag--us" data-country-code="1" />
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg
class="icon icon--16"
height="10"
width="14"
aria-hidden="true"
>
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-1"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-1"
/>
</span>
</span>
</span>
Large Phone input
Use the phone-input--large modifier to increase the size of the phone input. Also, use btn--large, btn--large-fixed-height and textbox--large for the button and textbox respectively.
+1
<span class="phone-input phone-input--large">
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form btn--split-start btn--large btn--large-fixed-height"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
data-country-code="1"
aria-label="Country: United States of America (+1)"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--al"
aria-hidden="true"
data-country-code="355"
/>
<span> Albania </span>
<span> (+355) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-2"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-2"
/>
</span>
</span>
Readonly Phone input
Use the phone-input--readonly modifier to make the control readonly. The listbox button is disabled and readonly attribute is added on the textbox to prevent any modification of its value.
+1
<span class="phone-input phone-input--readonly">
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form btn--split-start"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
aria-label="Country: United States of America"
disabled
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--al"
aria-hidden="true"
data-country-code="355"
/>
<span> Albania </span>
<span> (+355) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-3"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-3"
value="123456789"
readonly
/>
</span>
</span>
Disabled Phone Input
Use the phone-input--disabled modifier to turn on the disabled state. Besides modifier, disabled attribute on both the listbox button and textbox input to completely disable the phone input.
+1
<span class="phone-input phone-input--disabled">
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form btn--split-start"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
aria-label="Country: United States of America"
disabled
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--al"
aria-hidden="true"
data-country-code="355"
/>
<span> Albania </span>
<span> (+355) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-4"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-4"
disabled
/>
</span>
</span>
Error Phone Input
Using the listbox-button--error modifier, turns on the error state to the listbox button and aria-invalid="true" to the textbox.
+1
There was an error
<span class="field" role="group" aria-labelledby="phone-number-label-2">
<label class="field__label field__label--stacked" id="phone-number-label-2">
Phone number
</label>
<span class="phone-input phone-input--error">
<span class="listbox-button listbox-button--form listbox-button--error">
<button
class="btn btn--form btn--split-start"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
aria-label="Country: United States of America"
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span class="fflag fflag--al" data-country-code="355" />
<span> Albania </span>
<span> (+355) </span>
</span>
<svg
class="icon icon--16"
height="10"
width="14"
aria-hidden="true"
>
<use href="#icon-tick-16" />
</svg>
</div>
...
<div
class="listbox-button__option"
role="option"
aria-selected="true"
>
<span class="listbox-button__value">
<span class="fflag fflag--us" data-country-code="1" />
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg
class="icon icon--16"
height="10"
width="14"
aria-hidden="true"
>
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-5"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-5 field-phone-number-1-description"
aria-invalid="true"
/>
</span>
</span>
<div
class="field__description field__description--attention"
id="field-phone-number-1-description"
>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-attention-filled-16" />
</svg>
<span> There was an error </span>
</div>
</span>
Fluid Phone input
Using the phone-input--fluid modifier makes the component fluid and expands it to the width of its container.
+1
<span class="phone-input phone-input--fluid">
<span class="listbox-button listbox-button--form">
<button
class="btn btn--form btn--split-start"
aria-expanded="false"
aria-haspopup="listbox"
type="button"
data-listbox-button-prefix="Country: "
aria-label="Country: United States of America"
>
<span class="btn__cell">
<span class="btn__text">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
</span>
<svg class="icon icon--12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12" />
</svg>
</span>
</button>
<div class="listbox-button__listbox">
<div class="listbox-button__options" role="listbox">
<div class="listbox-button__option" role="option">
<span class="listbox-button__value">
<span
class="fflag fflag--al"
aria-hidden="true"
data-country-code="355"
/>
<span> Albania </span>
<span> (+355) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
...
<div class="listbox-button__option" role="option" aria-selected="true">
<span class="listbox-button__value">
<span
class="fflag fflag--us"
aria-hidden="true"
data-country-code="1"
/>
<span> United States of America </span>
<span> (+1) </span>
</span>
<svg class="icon icon--16" height="10" width="14" aria-hidden="true">
<use href="#icon-tick-16" />
</svg>
</div>
</div>
</div>
</span>
<span class="textbox">
<span id="phone-prefix-6"> +1 </span>
<input
class="textbox__control"
type="tel"
aria-label="area code + phone number"
autocomplete="tel-national"
aria-describedby="phone-prefix-6"
/>
</span>
</span>