Skip to content
Download assets

Text area

A text area takes an answer longer than a line: notes on a candidate, a message to an employer, the reason for a decision.

How it grows

The area opens 3 lines tall and grows with the text up to 10 lines, then scrolls inside itself. It sizes itself, so it has no resize handle.

Enter starts a new line. When the surface has one main action, Cmd+Enter on a Mac or Ctrl+Enter elsewhere sends it, and the hint names the keys.

Height at rest
3 lines, 84 px
Height before it scrolls
10 lines, 224 px
Padding
12 px
--space-3
Text
14 px on 20 px, 16 px on 22 px on touch
--text

Character limits

When an answer has a limit, a count sits at the end of the label row: 412/500.

Let the person write past the limit. The count turns red, an error says how much to remove, and the form waits. Cutting the text at the limit would drop the end of a paste without a word.

512 of 500 characters

Remove 12 characters.

Count
11 px, aligned figures, at the end of the label row
--text-muted
Count over the limit
11 px
--error

States and accessibility

A text area has the look and the states of the text field: rest, focus, error, read only and disabled.

The count is part of the field's description. A screen reader hears it as 412 of 500 characters when the area takes focus, not on each key.

Permitted and not permitted

Permitted

  • Let the text run past the limit and say how much to cut

    Nothing the person wrote is lost.

Not permitted

  • A hard limit that cuts pasted text

    The end of the paste disappears and nobody is told.

NextSearch field

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

JSON

{
  "title": "Text area",
  "path": "/components/text-area",
  "url": "https://design.werklist.com/components/text-area",
  "text": "https://design.werklist.com/agent/components/text-area",
  "summary": "Several lines of text, such as notes on a candidate, that grow as the person writes.",
  "version": "2.1.2",
  "kind": "component",
  "name": "TextArea",
  "purpose": "Takes typed text that runs over one line, inside a Field.",
  "use": [
    "Notes, messages, reasons and descriptions"
  ],
  "avoid": [
    "A one line answer: use a text field",
    "Formatted text with bold, lists or links"
  ],
  "anatomy": [
    {
      "part": "Padding",
      "measure": "12 px on all sides",
      "token": "--space-3"
    },
    {
      "part": "Height at rest",
      "measure": "3 lines: 84 px, or 90 px on a touch screen"
    },
    {
      "part": "Height before it scrolls",
      "measure": "10 lines: 224 px, or 244 px on a touch screen"
    },
    {
      "part": "Text",
      "measure": "14 px on 20 px, and 16 px on 22 px on a touch screen",
      "token": "--text"
    },
    {
      "part": "Fill, edge and focus",
      "measure": "those of the text field, with a corner radius of 8 px",
      "token": "--radius-lg"
    },
    {
      "part": "Count",
      "measure": "11 px on 16 px, aligned figures, at the end of the label row, written 412/500 and read as 412 of 500 characters",
      "token": "--text-muted"
    }
  ],
  "states": [
    {
      "name": "Rest, focus, error, read only, disabled",
      "change": "As the text field, with no hover state",
      "tokens": [
        "--input-border",
        "--brand-blue",
        "--error"
      ]
    },
    {
      "name": "Over the limit",
      "change": "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",
      "tokens": [
        "--error"
      ]
    }
  ],
  "keys": [
    {
      "key": "Enter",
      "action": "New line"
    },
    {
      "key": "Cmd+Enter on a Mac, Ctrl+Enter elsewhere",
      "action": "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"
  ]
}

Raw file: https://design.werklist.com/agent/components/text-area