Input Masks Design

by Luke Wroblewski December 12, 2008

Input masks integrate formatting cues directly into an input field to help signal how to correctly answer a question. These formatting instructions are automatically included in an input and cannot be removed by a user. More importantly, a user cannot enter other non-valid characters into the input field. Check out the demo at Masked Input Plugin (video below).

When implementing input masks, it’s a good idea to surface the formatting right up front and not gradually reveal it as people enter information into an input field. Contrast the example above with the one at Dynamic Field Masking (video below).

Here the formatting is added to the input as a person types and valid characters (like the $ in the second input) are show for a second when added by a user, then removed despite being part of the correct format. This example illustrates, that like all dynamic solutions, for input masks the details of implementation matter a lot.

Reformatting a valid input after it has been entered correctly by a user, however, can help reinforce that a valid answer was provided. So if you are thinking of reformatting an input for people, wait until they are done answering your question!