Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

UX Power Tools – Medium | Jon Moore
This is part of a series of short tutorials about specific elements, components, or interactions. We’ll cover the UX, the UI, and the construction inside of Sketch. Plus, there’s a freebie for you at the end!
A pre-formatted text box for things like phone numbers and credit cards.
To collect data that requires high levels of precision, or when you want to make sure you’re sending the database clean records in a consistent format.
Never expect the user to follow instructions. Instead, enforce formatting within the control itself. It’s a lot harder for users to screw up, and the data you get will always look beautiful. 😍
Phone Numbers: Users choose their country from the dropdown. The field uses masked formatting to show the expected appearance of the number. As they type, the field will automatically format their entry with the appropriate parentheses, hyphens, and spaces.
Credit Cards: Users begin typing their credit card number, and the system starts validating after two digits (validation rules here). When a format is recognized, the associated credit card symbol will appear on the right. It’s best practice to mask the user’s input after the field loses focus so that the wandering eyes of strangers can’t see it and go on an Apple shopping spree.
A pre-formatted text box is pretty simple to build with Sketch’s nested symbols. There are a couple tricks you can use so they’re ⚡️ fast to design with:
Sorry, I couldn’t find a flag with 51 stars on it.
These are the nested symbols that make changing state a breeze.
Pre-formatted text boxes aren’t particularly difficult to design, but there are some tricks you can use (like nested symbols and overrides) to make your life a little easier during the process.
Before you leave, don’t forget to:
When I’m not formatting phone numbers, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.
Follow UX Power Tools on Twitter
Follow me on Twitter
Design a Pre-Formatted Text Box for Phone Numbers and Credit Cards was originally published in UX Power Tools on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community