TextInput

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.

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.

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.

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

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

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.

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.

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.

Used to indicate that a TextInput cannot be interacted with.