HPE
Design System
Foundation
Components
Templates
Extend
Components

MaskedInput

MaskedInput allows you to specify formalized text within a form field.

Open in Grommet Designer
Open in Figma
Open docs

Guidance

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.

Usage

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.

Accessibility

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.

Variants

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.

IP Address

Used to collect a single IP address.

Open docs

IP Range

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

Open docs

Size with units

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

Open docs

Email

Used to email address and formats according to email syntax.

Open docs

Time

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

Open docs

Date

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

Open docs

Validation

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".

Open docs

Disabled

Used to indicate that a MaskedInput cannot be interacted with.

Open docs

Related

Related content you may find useful when using MaskedInput.

Components
TextInput
The TextInput component allows the user to input shorter forms of data and content.
HPE Forms Preview
Templates
Forms
Common form use cases from application configuration to payment acceptance.
Components
Select
Flexible input allowing users to choose from a list of options.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page