Text Input Field

Last edit: 2023.08.07

Text Input Field lets users enter and edit text.

Anatomy

anatomy
  1. Input text: Text that shows the user input, or a hint for required information when nothing has been entered yet.
  2. Helper message: Text that provides more context for required user input, or information about an error that occurred and how to resolve it.
  3. Trailing icon: Action to clear the input field.
  4. Activation indicator: A line that indicates the active state of the text field.

The Text Input Field supports the following configurations:

anatomy configurations

States

The Text Input Field supports multiple states to indicate its status:

anatomy states
StateAbout
InactiveAn empty state of the input field. It is shown when a user has not provided any input, there was no predefined input, or the input text has been cleared. The label shows the intended action.
ActiveA state when the user starts interacting with the empty or cleared input field. The activation indicator becomes highlighted, the type cursor is shown before the label, and the "clear" icon is shown at the end of the input field text.
Typing inputA state when the user starts typing. The input text style changes.
Inactive inputA state to indicate the finished input query. The style of the activation indicator changes back to normal.
Error messageA state that indicates the error state when the input provided was incorrect or missing. The assistive text describes the current problem and turns red along with the activation indicator.
DisabledA state when typing isn’t possible at the moment (for example, due to safety reasons).

Usage

usage example1 thumbnail

Favorites panel in Navigation

Renaming the saved location

usage example2 thumbnail

Vehicle settings in Navigation

Adjusting vehicle parameters

Customization

TypeCustomizable
ThemingThe sizing of the text, activation indicator (height), trailing icon, margins, and paddings can be adjusted. Additionally, it’s possible to change the styling of the text, activation indicator, and trailing icon.
ConfigurationsThe visibility of the helper message can be configured.
ContentThe hint, helper message, and error message text can be changed. Also, the trailing icon can be replaced.