MaskedInput

MaskedInput places syntax restrictions text entered in an input field which allows for efficient, error-free entries. It is similar to TextInput, in that it allows the user to input shorter forms of data and content. However, it is used to provide extra guidance and enforcement of input formats.

MaskedInput should be used anytime there is formalized syntax and should always be used within a Form.

When using MaskedInput, you should:

• Provide suggestions whenever possible to provide hints of possible values
• Use the input mask to restrict input syntax to the desired format
• Ensure any syntax separators are automatically inserted if needed, but also allow users to type them

MaskedInput reduces the number of input fields needed by allowing multiple criteria to be consolidated into a single input. For example, you can use MaskedInput to collect storage size amounts and units in a single input.

In every case possible, MaskedInput should be used inside of a FormField to ensure that a label is appropriately paired with the input. This behavior is important to screen reader users who need to know to which context the MaskedInput is referring.

Placeholder text does not serve as a sufficient means of restricting syntax. As the user types, the input should auto-format to the intended format.

A MaskedInput's visual state informs the user of its ability to be interacted with or if any validation errors have occured. It automatically formats input values to the desired syntax.

Used to collect a single IP address.

Used to collect a range of IP addresses. As the user types, the syntax is filled in automatically.

Used to collect information on size, with suggestions that match common size intervals.

Used to email address and formats according to email syntax.

Allows time information to be input with options of 15 minute intervals by suggestion or any custom time by typing.

Used to collect full date where day value suggestions match the number of days in the selected month.

Used to confirm that an input has been completed properly and to its entirety, even when syntax restrictions are in place. See the difference upon submission when inputting "123.123.123.123" vs. "43.21".

Used to indicate that a MaskedInput cannot be interacted with.