Telephone Input

Telephone input

Description Label describes input
Role type="text", inputmode="numeric" to utilize mobile number pad
Relationships for="input-id" is required in the label
Focus Visibly focusable with the tab key / swipe
Action Standard single line text editing keys

Native Element

A telephone input should not be a type="number" input because it's not a true integer. Use type="text" and a non-intrusive input mask that doesn't insert obtrusive characters (like underscores).

Description

  • Label inner text should describe the radio input
  • aria-describedby="description-id" for additional descriptions

Role

  • Indicates it is an input
  • Use inputmode="numeric" to utilize mobile number pad

Relationships

  • or="input-id" connects the input to its label

State

  • required
  • disabled

Focus

  • Visibly focusable with the tab key / swipe

Actions

  • Standard single line text editing keys

Examples