HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Usage
Accessibility
Variants
IP address
IP range
Size with units
Email
Time
Date
Validation
Disabled
Components

MaskedInput

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

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.

IP range

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

Size with units

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

Email

Used to email address and formats according to email syntax.

Time

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

Date

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

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

Disabled

Used to indicate that a MaskedInput cannot be interacted with.

Related

Related content you may find useful when using MaskedInput.

TextInput

TextInput is a field used in forms to capture short entries.
HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

Select

Select is a flexible input field that allows users to choose from a list of options.

DateInput

A widget which allows the user to select a date or range of dates from a calendar.

Still have questions?

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

Edit this page