Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Added link to field validations


Expand
titleExpand for table of Content
orderupdate
Table of Contents
outlinetrue
stylesquare

Description

Status
colourYellow
titleOngoing
 

A text area is a multi-line text input control. Use these to allow user's to enter large bodies of text data such as object descriptions.

Usage & Behavior


General guidelines

Use the text area if you want users to enter multiple lines of text. If you only want them to enter a single line of text, use the text field instead.

Always provide a meaningful label for any input field, and use the least complex control (such as select instead of value help). Use more intricate controls only if the use case really requires it. Where appropriate, help users by providing mask input or hint texts.

Structure

The text area consists of:

  • Label - a meaningful label of what information the user needs to provide
  • Input Field -The input field can display a hint text.A hint text in the text field represents an example of what you want the user to enter. This will be overwritten as soon as the user starts typing.

States

Interaction

TBD


Validations and errors

See additional information in Field Validation.

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

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

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


Best practices

TBD

Design


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



New LUX design 


...