- Label: text is used to inform users as to what information is requested for a text field. Every text field should have a label.
- Display Icon (optional): A Display Icon can describe the type of input a text field requires, and be touch targets for nested components. For example, a calendar icon may be tapped to reveal a date picker.
- Help Text (optional): Help Text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus. Error messages will take the place of Help Text when necessary, see Error Handling for more information.
- Placeholder Text: Placeholder Text can be used literally describe the action to be taken by the user, or provide an input example. For example, “Enter name” or “John Doe” for a text field that requires a name.
Text Areas are widespread and need to account for a variety of different states, information densities, and ever-changing layouts.
The default text field is the standard input users will see before interacting with it.
The focus state is used to indicate when a text field is active.
The danger state is used to capture any errors that occur on form submission. This will always be accompanied by an error message and an Alert. The error message should replace any Help Text currently in view. A single line is recommended for error messages but two lines is acceptable in certain circumstances. The danger state comes with its own variation on focus, changing the shadow spread from purple to red.
The disabled state is used to block all interaction with a text field.