Input Mask
An Input Mask, in UX, guides users by providing a predefined format or structure.
- Overview
- Specs
- Guidelines
Component
An input mask, in UX, refers to a design element that guides users in entering data by providing a predefined format or structure for input. It serves to improve data accuracy and consistency by visually representing the required format for input.
By enforcing a specific format, Input Masks enhance usability and reduce errors, particularly for complex or unfamiliar data types.
They contribute to a smoother user experience by providing clear guidance and feedback during data entry tasks this component can be used for.
A: Hyphen Variation
B: Slash Variation
C: None Variation
1: Label
2: Adornment
3: Placeholder/Input
4: Divider
Used for:
Credit cards
In cases where it is necessary to insert a credit card, for example when renewing a subscription, an Input Mask would be the component used;
Phone numbers
In cases where it is necessary to insert a phone number, for example when creating a client, an Input Mask would be the component used;
Postal code
In cases where it is necessary to insert a postal code, for example when creating a client, an Input Mask would be the component used;
IBAN code
In cases where it is necessary to insert an IBAN code, for example when creating an employee, an input mask would be the component used.
Don’t use for:
Flexibility
Input Masks may restrict user input, making it difficult for users to enter data that deviates from the predefined format;
Complex data
For data types that vary widely in format or require dynamic input, such as free-form text or user-generated content, Input Masks may be too rigid and impractical;
Task complexity
For simple data input tasks that do not require strict formatting or validation, Input Masks may introduce unnecessary complexity.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated dividers’ color;
- Updated large text box size;
