Text Input
Text inputs allow users to enter free-form text data such as filling in contact or payment information.
Anatomy
- Label: Indicates the purpose of the text input field. It should clearly communicate what kind of information is expected.
- Description: Provides additional context/instructions about the text input field. It helps users understand what is required or gives examples of the kind of information they should enter.
- Optional indicator: Indicates fields that are not mandatory.
- Input box: the interactive area where users can type their input
- Input text: The text string entered by the user. This is not placeholder text and only applies when the user has typed.
- Feedback message: provides users with response regarding their input. For now it’s only errors. The feedback message should be clear and specific, guiding the user on any necessary actions
Usage Guidelines
Width
As layouts adapt to larger screens, flexible container dimensions are applied to form components for better readability. The default width is 4 grid columns—343px on mobile, expanding to 422px on desktop for an optimized experience.
In most cases, the input field follows the standard forms width, which adapts to the layout. However, when the expected user input is a short string of characters, it’s better to use a properly-sized input field:
Placeholder Text
The input box should never be used to display a text hint for the user.
Using placeholder text is considered a bad practice because the hint disappears once the user starts typing, with no obvious way to retrieve it and forces the user to have to rely on memory.