The phone input pattern is a progressive enhancement of a textbox that allows users to select the country associated with their phone number.

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.

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 .

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.

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.

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.

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.

Fluid Phone input

Using the phone-input--fluid modifier makes the component fluid and expands it to the width of its container.