A phone input allows the user to enter phone number values.
- 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.
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.