HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Guidance
About TextInput
Accessibility
Variants
Password
With suggestions
Labeled by icon
Validation
Disabled
Components

TextInput

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

Guidance

The TextInput component allows the user to input shorter forms of data and content. Passwords and tags can also be used with the TextInput component. Style can be variable, based upon the use case and customer need that will elicit user confidence in success.

About TextInput

Text input fields perform text validation. Some use cases for TextInput include username fields, password fields, and search fields. In some cases, it may be beneficial to use an icon to reinforce the context. One example when an icon would be useful would be a search input.

There are many ways to give the user hints about how to properly fill out a text input. In addition to the label, placeholder text can help guide the user. When you want to place syntax restrictions on the input, such as an email address or phone number, consider using MaskedInput.

A TextInput display the following states: enabled, focused, focused with value, validation, and disabled.

Accessibility

In every case possible, TextInput 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 TextInput is referring.

If you need to use TextInput outside of the context of a FormField, it is important to make sure the TextInput is labeled in an alternate way to meet accessibility requirements. One approach is to use another visual indicator, such as the TextInput's icon, to serve as the label. See how this is done in the Labeled by icon example.

Placeholder text does not serve as a sufficient means of meeting accessibility requirements for labels. To meet accessbility requirements, placeholder text should be used in conjunction with a label or aria-labelledby attribute.

Variants

A TextInput's visual state informs the user of its ability to be interacted with or if any validation errors have occured.

Password

Used to maintain the privacy of the password a user has entered. This is achieved by applying type="password" to the TextInput.

With suggestions

Used to prompt users with available options or suggestions. Suggestions may persist regardless of what the user has entered or may be filtered based on what the user has typed. One common use case for suggestions would be to display prior values for the same field.

Type something to see suggestions persist regardless of input value.
Type something to see suggestions filter based on the input value.

Labeled by icon

Some situations may need TextInput without a visual label, such as when implementing a search field. To meet accessibility requirements, the TextInput may be labeled by another visual context such as an icon with an id.

Validation

Used to indicate that a TextInput does not meet the validation requirements of its bounding FormField. Click the Validate button while the TextInput is empty to see the validation state.

Type something to resolve this error.

Disabled

Used to indicate that a TextInput cannot be interacted with.

Related

Related content you may find useful when using TextInput.

HPE Forms Preview
Forms
Common form use cases from application configuration to payment acceptance.
TextArea
TextArea is a field used in forms to capture longer text. This component provides the user with space to type more characters than the TextInput field.
MaskedInput
MaskedInput allows you to specify formatted text within a form field.

Still have questions?

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

Edit this page