Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputPrinciplesAccessibilityUsage and variationsDemos & APIRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Phone input

DraftAccessible

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

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.

Accessibility

  • HDS Phone number input supports HTML input pattern attribute. It can be used to specify an exact format for the phone number.
    • Note that pattern is not visible to regular users in any way. Some of the screen readers informs the user if the input does not match the pattern. This attribute mostly increases user experience for screen reader users.
  • If multiple phone numbers are asked in the same view, make sure they are labelled descriptively or have an extra fieldset label linked to the input with aria-desribedby.

Usage and 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.

Assistive text

Core code example:

<div class="hds-text-input">
<label for="input" class="hds-text-input__label">
Label
<span class="hds-text-input__required">*</span>
</label>
<div class="hds-text-input__input-wrapper">
<input
id="input1"
class="hds-text-input__input"
type="tel"
autocomplete="tel"
value="0451234567"
/>
</div>
<span class="hds-text-input__helper-text">Assistive text</span>
</div>

React code example:

<PhoneInput
defaultValue="0451234567"
helperText="Assistive text"
label="Phone number"
required
/>

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

    React code example:

    {() => {
    const options = [{ label: 'Finland (+358)' }, { label: 'UK (+46)' }];
    return (
    <>
    <p id="work-phone" style={{ fontSize: '18px', fontWeight: 'bold' }}>
    Work phone
    </p>
    <div style={{ display: 'grid', gridTemplateColumns: '200px 300px', columnGap: '16px' }}>
    <Combobox
    id="hds-select-1"
    label="Country code"
    helper="Assistive text"
    aria-describedby="work-phone"
    options={options}
    defaultValue={{ label: 'Finland (+358)' }}
    required
    toggleButtonAriaLabel="Choose country code"
    />
    <PhoneInput
    id="WithCountryCode"
    defaultValue="0451234567"
    aria-describedby="work-phone"
    label="Phone number"
    required={true}
    />
    </div>
    </>
    )
    }}

    Demos & API

    Core

    Phone input in hds-core

    React

    Phone input in hds-react

    PhoneInput API