A phone input allows the user to enter phone number values.



Assistive text


  • 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.



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.

Assistive text

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.

Work phone