MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Input masks

A way of controlling how data is entered into an input field.

An input mask ensures that the data is formatted correctly and consistently and prevents errors or invalid values.

Input mask can help format credit card numbers in the full range of expected values from 10 to 19 digits.
Input mask can help format credit card numbers in the full range of expected values from 10 to 19 digits.

Input masks help to align the typed information with the expected format and the user’s mental model. For example in a credit card number field, the digits are grouped as they are on the physical credit card when the user types them in.

When to use

Use in fields with a specific expected format like Container Number, Document Reference Number, Postal Code, Phone Number, or Date and Time. An input mask allows you to constrain and group the information into the needed format, without impairing the user’s ability to copy/paste or correct mistyping.

Indicating expected format

While an input mask takes care of the correct formatting as the user types in the value, using the placeholder or hint text provides the user with additional context as to what is being asked of them.

Using the placeholder text

For example, placeholder text can function as a prompt for the user for what format is required.

Input mask can help format credit card numbers in the full range of expected values from 10 to 19 digits.
Input mask can help format credit card numbers in the full range of expected values from 10 to 19 digits.

One downside of using the placeholder text is that the expected format displayed to the user disappears as they are typing. Having a hint text could provide continues assistance to the user.

Using the hint text

For example, when the format in the input field is a complex mix between different types of characters it is a good practice to provide a reference example as a hint text.

Input mask can help format credit card numbers in the full range of expected values from 10 to 19 digits.
Input mask can help format credit card numbers in the full range of expected values from 10 to 19 digits.

Use a combination of label, placeholder, hint text, and input mask to provide the right amount of assistance depending on the context and usecase. Check the help section of Forms guidelines for more information.

Consider something else

  • When there is a constant value that has to be grouped with the typed value opt to use Sufix and Prefix in the Input component. For example, add “USD“ as a prefix to an input field instead of using Input Mask to have it formatted when a user types in the digits.
  • When there is no common input pattern, then opt to use default input. For example, when users need to enter a Company Name.
  • When the input pattern is too complex and may obstruct the user from entering a valid input e.g. an email with many possible scenarios for input, is not a good candidate for masking, despite following certain formatting rules.