Overview
The text input component allows users to enter short strings of text into a field. The label should clearly describe the information that a user needs to enter.
You can set help text and placeholder text for this component. Help text is useful for providing context or formatting instructions to the user. Placeholder text should be used sparingly, since it disappears when the user starts typing.
The label and help text should be in sentence case. Placeholder text should be in sentence case, unless this conflicts with formatting guidelines provided in the help text.
Variants
Warning
Use the warning variant when you need the user to review a response. The warning message will replace the help text.
Error
Use the error variant when the user’s response will prevent the input from being submitted or saved. This may include missing required responses or invalid responses. The error message will replace the help text.
Usage
When to use
The text input component is ideal for collecting short text responses from users.
This might include information like first and last name, usernames, or passwords.
When not to use
Avoid this component if users will need to enter at least a sentence of text. The text area component provides more space and better visibility to the user.
Accessibility
The label must clearly describe the information you expect the user to provide.
Never put critical information in placeholder text. Place any essential instructions in help text instead.