Types
Text field
When the expected input is a single line of text, use a text field. This is the most commonly used field to provide information and comes with several built-in features as we will demonstrate on these pages.
Text area
A Text Area provides the user with more space for extensive input. A Text Area can be used when the expected input could potentially cover multiple lines of text, for example to provide room for a description, comment or other type of message. A Text Area has a unique functionality that is not included in the text input, namely a resize handle to expand the field. On the other hand, it does not include a leading or trailing icon options and is therefore also more limited. It is solely there to provide multiple lines of text.
Because text fields are the commonly used type and provide more features we will use them in the examples for this documentation.
- Text Field
- Text Area
Anatomy
Our text field containers are outlined with rounded corners. The label text is placed outside of the container for accessibility reasons and is used to inform the user about the requested information.
Additionally, a text fields can contain different optional elements to assist the user the best way possible. For further guidelines on text field usage please continue with the Usage page.
- Label
- Hint text (optional): short copy to assist the user
- Leading icon (optional): to add weight to it and indicate the type of input
- Input text: entered or pre-filled data. Could also be a placeholder when no data has been entered
- Trailing icon or clear button (optional): interactive icon to trigger an additional input mechanism (such as a date picker) or a clear button to clear the input
- Assistive icon (optional): to provide more context or information. Please see the Usage page to discover the behavior
States
