Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
style
Table of Contents
outlinetrue
square

Description

Status
colourYellow
titleOngoing
 

...

The text area consists of:

  • Label - meaningful label of what information the user needs to provide

  • Input Field (the input field can display a hint text).

States

...

Interaction

  • Hover - hovering the text area will change the cursor to text cursor.

  • Active When text exists and the field is active -

    • Clicking the text area will place the cursor at the cursor position and the hint text will disappear. 

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

    • Triple clicking the text area will select the whole text in the text area, if exists.

  • When text was not inserted and the field is active -

    • Clicking the field will place the cursor at the beginning and the hint text will disappear.

  • Non active - If no text was inserted, the hint text will be displayed again when the field will lose focus.

  • If a character limit was set, reaching the limit will prevent the user from keeping typing. 

  • In special cases, the text area height will be increased manually, according to the length of the text.

Validations and errors

Please refer to Field validation page for more information.

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

...