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 added to the field:

      • a text cursor will appear at the beginning of the text field.

      • the hint text will disappear.

    • Where text already exists in the field:

      • a text cursor will appear in the position where the user clicks.

      • 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):

    • When typing, characters are masked.

    • The field can contain a show/hide password button.

    • In case Caps lock or Num lock are on, a corresponding tooltip will appear (see Common Messages Repository).

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: 

...

Keyboard

Description

Tab

Navigates to the next component.

Shift + Tab

Navigates to the previous component.

Space

Acts as within a text input.

Enter

Acts as within a text input.

Esc

N/A

Arrows

Acts as within a text input.

Mouse

Description

Right click

Set Focus state on component

Design

Zeplin link

Screen thumbnail

https://zpl.io/aMW4dR2

...