Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Table of Contents

...

  • On hover over the text field, the mouse cursor will change to a text cursor.

  • On click:

    • Where no text has been inserted into added to the field:

      • A text cursor will appear at the beginning of the input text field.

      • The hint text will disappear.

    • Where text already exists in the field:

      • A text cursor will appear in the place position where the user clickedclicks.

      • Double-clicking a word inside the text field will select that word.

      • Triple-clicking the text field will select all of the text.

  • When the text field becomes inactive (user clicks away) the hint text will reappear, if no other text has been added.

  • If a character limit has been set, reaching the limit will prevent the user from entering any more characters. 

  • For secured fields (such as password), the characters are hidden, even when typing. They will be displayed as dots instead:

Validations and errors

Please refer to the Field validation page for more information.

A text field with a warning will have an orange border and a warning icon, as shown below: 

...

A text field with an error will have a red border and an error icon, as shown below:

The orange or red border will be removed when the content is updated and becomes valid.

Best practices

Use:

  • When Where the user needs to enter a short, single-line text (in plain text, such as a password, URL, phone number, or email address) , or a number.

Don’t use if:

...