Form

Telephone number input

Published on

Description

The telephone input provides a text field optimized for phone numbers. Mobile devices display a numeric dial pad.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="tel">
      <hgroup>
        <h1>What is your telephone number?</h1>
      </hgroup>
    </label> <span id="tel-hint">Use the format +1-000-999-1234</span> <input value="" id="tel" name="tel" autocomplete="tel" type="tel" aria-describedby="tel-hint" /> </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-tel" target="_top">View our guidance </a></p>
</form>

Accessibility

  • Use explicit <label for="id"> association.
  • Use autocomplete="tel" to enable browser autofill.
  • Inherit typography for WCAG 1.4.12 compliance.
  • Provide hint text describing the expected format (e.g. "+1 555-123-4567") via aria-describedby.

References

Variables

None for input