The problem with input masks and what to do instead

In 2010 I discovered input masks.

They seemed like a smart way to prevent errors. Because they help users follow a format. And they do so without taking up space.

But the truth is that this fancy pattern degrades UX.

Here’s why:

Problem #1: They’re confusing

For example, the cursor advances automatically to the next position. And placeholder characters can’t be deleted.

Telephone input mask replacing characters and advancing to the next position automatically

Problem #2: They may be mistaken for an actual answer

This is because the mask looks like an input causing using to submit the form with errors.

Top: input looks filled out (bad). Bottom: input looks empty (good)
Input masks make the input look like it’s been answered

Problem #3: They make the interface feel broken

This is because typing a restricted character gets ignored.

Restricted characters get ignored without giving users any feedback

Problem #4: The format may be unfamiliar

For example, a phone number may require a country code which isn’t always expected and makes users work harder.

Top: Phone input with placeholder showing the format (bad). Bottom: Phone input empty (good)
Input masks may use unfamiliar formats that don’t make sense to everyone

Problem #5: They’re misleading and verbose in screen readers

For example, they announce placeholder characters which aren’t part of the answer. And they don’t announce characters that were typed but ignored.

Voiceover announces placeholder characters. And fails to announce characters that were typed but ignored.

Problem #6: They can break text expansion

For example, using the text replacement feature on iOS, typing ‘zpho’ should be automatically replaced with my phone number. But a phone input mask will ignore it.

Input mask ignores text expansion

What to do instead

  1. Leave the input empty to make it obvious where the answer goes
  2. Let users type what they like so the interface doesn’t feel unresponsive and broken
  3. Allow multiple formats so users don’t have to fix something unnecessarily
  4. Allow users to check their answers either on a separate page or just below the field