Textarea

Stable

Textareas take several lines of free text: a note to a tenant, a description of a repair. They look and behave like a text input, but are taller and can be resized up and down.

Note to tenant

---

Specifications

LightDark

Anatomy

Note to tenant

The tenant sees this in their reminder email.

1) Label

font-size: var(--at-text-sm) /* 14px */

font-weight: var(--at-weight-bold)

2) Hint (optional)

font-size: var(--at-text-sm)

color: var(--at-text-subtle)

3) Field

min-height: 5rem /* 80px */

resize: vertical

padding: var(--at-space-3) /* 8px */

border: 1px solid var(--at-border)

border-radius: var(--at-radius-1) /* 6px */

Size and spacing

Description

Field

min-height: 5rem /* 80px */

width: 100% of its container

set rows="4" or more for longer text

Type

font-size: var(--at-text-md) /* 16px */

stops phones zooming in on focus

Textarea

Set rows to roughly how much text you expect, so the box hints at the answer length.

LightDark

Example

Describe the repair

States

Default

border: 1px solid var(--at-border)

Hover

border-color: var(--at-text-subtle)

Focus

Boiler pressure low

outline: 3px solid var(--at-border-focus)

outline-offset: 2px

Error

border: 2px solid var(--at-border-danger)

plus an .at-error message

Disabled

Locked

opacity: 0.5

cursor: not-allowed

---

Usage

When to use

• Free text that may run to more than one line.

When not to use

• A name, reference or amount: use a text input.
• A fixed set of answers: use radios or a select.

Content

• If there is a length limit, say so in the hint: "Up to 500 characters".
• Do not use placeholder text as the label.

Do and don't

Describe the repair

Up to 500 characters.

DoA visible label, and the limit in the hint.

Don'tOne row high, with a placeholder instead of a label.

Do

• Size it to the expected length with rows.

Don't

• Turn off resizing.

---

Implementation

HTML

Copy

<div class="at-field">
  <label class="at-label" for="note">Note to tenant</label>
  <textarea class="at-textarea" id="note" rows="4"></textarea>
</div>

Classes

Class	What it does
at-textarea	Multi-line input, resizes vertically

Tokens used

--at-border, --at-surface, --at-text, --at-border-bold

---

Accessibility

• Same labelling as a text input.

Related

Field: label, hint and error

Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.

View component

Text input

A single line of text, with its label above.

View component