PhoneInput

Usage

Example

Principles

• A label should always be provided with a phone number input.
  • Make sure that the label is clear and concise. The user should immediately understand what phone number they are supposed to input.
• If a specific phone number format is required, describe the format in the assistive text.
  • Generally it is recommended to allow all common formats and fix the format automatically for the user if needed.
• Unless you can fill the input for the user automatically, a default value should not be set.
  • A placeholder text is often not used either. If a placeholder is used, it is a good practice to make them easily distinguishable from the actual input. A recommended way to do this is to format the placeholder text like this: "E.g. 0401234567".
• If a country code must be inputted, a separate HDS Combobox input should be used alongside the phone number input.

Variations

Default

A default variant of the phone number input.

Note! A default value is used here for demonstration purposes. It should not be used unless the input can be automatically filled for the user.

With a country code selection

If a country code is a required input (or otherwise critical), it should be asked in a separate input using HDS Combobox.

These two input are linked together using a fieldset title and aria-desribedby attribute. This way is is clear for screen readers which phone number these two inputs relate to.