# Text area

Takes typed text that runs over one line, inside a Field.

* Kind: component
* Name: TextArea
* Page: https://design.werklist.com/components/text-area
* Version: 2.1.2

## When to use it

* Notes, messages, reasons and descriptions

## When not to use it

* A one line answer: use a text field
* Formatted text with bold, lists or links

## Anatomy

* Padding: 12 px on all sides (--space-3)
* Height at rest: 3 lines: 84 px, or 90 px on a touch screen
* Height before it scrolls: 10 lines: 224 px, or 244 px on a touch screen
* Text: 14 px on 20 px, and 16 px on 22 px on a touch screen (--text)
* Fill, edge and focus: those of the text field, with a corner radius of 8 px (--radius-lg)
* Count: 11 px on 16 px, aligned figures, at the end of the label row, written 412/500 and read as 412 of 500 characters (--text-muted)

## States

* Rest, focus, error, read only, disabled: As the text field, with no hover state (--input-border, --brand-blue, --error)
* Over the limit: The count turns to the error colour. When the person leaves the area or sends the form, the error says how much to remove, such as Remove 12 characters, and the form is not sent (--error)

## Keyboard

* Enter: New line
* Cmd+Enter on a Mac, Ctrl+Enter elsewhere: Sends, where the surface has one main action

## Accessibility

* The count is part of the description. It is read when the area takes focus, not on each key
* The limit is checked and the text is never cut
* Long words and links wrap

## Content

* The hint names the shortcut for the reader's platform, joined with +, such as Cmd+Enter to send

## Tokens

* --glass-fill-input
* --input-border
* --brand-blue
* --text
* --text-muted
* --error
* --space-3
* --radius-lg