Text fields
lastmod 2020-06-19created 2020-06-193 edits
Components of a basic text field
Text_fields-anatomy.jpeg
- Container
- The interaction area where the user can enter information
- Input text
- The entered information
- Label Text
- An indicator of what information this text field takes.
- Placeholder text
- Text temporarily filled in before the input text is entered, to help users enter information (for example, a palceholder text such as 'Enter your password' can be used in a password field). Once the user actually fills in the input text, the placeholder text disappears.
- Helper or Validation text(optional)
- Provides additional information about entering the information, or criteria such as whether the entered information meets requirements. Not required; used optionally.
- Leading icon(optional)
- An icon that supports the information being entered. Not required; used optionally.
- Trailing icon(optional)
- Handles additional functions for the entered information (for example, an X icon to clear the entered text at once, or an eye icon to show the password as text instead of ***).