Description

...

Description

A text area is a multi-line text input control. It is used where the user is expected to enter a lot of text.

Usage & Behavior

General guidelines

...

The text area consists of:

• Label Preceding label - a meaningful label of what describing the information the user needs to provide. Input Field (the input field can display a hint text).

• Input Field.

• (Optional) Hint text - a short description of the expected input text, shown within the input field.

States

State	Default	Filled
Regular
Hover
Active
Disabled
Read Only
Error
Warning
Focused
Focused, Hover
Focused, Active

Interaction

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

• When text exists and the field is active -

  • Clicking the text area will place the cursor at the cursor position. 

  • 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 focusOn hover over the text area, the mouse cursor will change to a text cursor.

• On click:

  • Where no text has been added to the text area:

    • A text cursor will appear at the beginning of the text area.

    • The hint text will disappear.

  • Where text already exists in the text area:

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

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

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

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

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

• In special cases, the height of the text area height will be increased manually, according will increase automatically in response to the length amount of the entered text.

Validations and errors

Please refer to to the Field validation page for more information.

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

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

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

Best practices

• For short input, Don’t use where the text field componentuser only needs to enter a short amount of text → use a Text Field.

• Always provide a clear and meaningful preceding label for any input field.

• Where appropriate, help users by providing a hint texts which describes text describing the expected value of the fieldinput text.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link	Screen thumbnail
https://zpl.io/2v4yY7a

...