<?xml version="1.0" encoding="utf-8"?>

Prevent errors with phone input masks

Prevent errors with phone input masks Bad Practice
Prevent errors with phone input masks Best Practice

There are plenty of ways users can input a phone number. Instead of forcing users to type in the desired format, you can use a phone mask and prevent errors.[1] It allows users to enter the phone in whatever way they like and then auto-format the number into a standard format for your system's purposes.

Remember that input masks aren't placeholders. They appear only on focus and as users start typing. Placeholders, in fact, can be remarkably misleading, looking like automatic defaults and making users think the data is already filled.

Improve your UX & Product skills with interactive courses that actually work