Textarea

A textarea is a form control where people can enter one or more lines of text.

Example

HTML
CSS

<form id="tl-textarea-demo">
  <div class="tl-textarea">
    <label for="textarea-1"> Message </label>

    <p id="textarea-1-hint" class="hint-text">Give as much detail as you can</p>

    <textarea id="textarea-1" aria-describedby="textarea-1-hint"></textarea>
  </div>

  <button hidden>Submit</button>
</form>

/* -------------------------------------------------------------------------- */
/* Textarea                                                                   */
/* -------------------------------------------------------------------------- */

.tl-textarea {
  --colour-text: var(--tl-colour-text, #222222);
  --colour-background: var(--tl-colour-page, #ffffff);
  --colour-border: var(--tl-colour-text, #222222);
  --colour-hint: var(--tl-colour-grey, #666666);
  --colour-error: var(--tl-colour-error, #ca3535);
  --colour-focus-highlight: var(--tl-colour-highlight-focus, #7f238b);
  --colour-focus-contrasting: var(--tl-colour-text, #222222);
}

.tl-textarea {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-inline-size: 60ch;
  padding: 1rem;
  color: var(--colour-text);
}

.tl-textarea textarea {
  block-size: 8rem;
  padding: 0.5em;
  font-size: 1rem;
  color: var(--colour-text);
  background-color: var(--colour-background);
  border: 2px solid var(--colour-border);
  border-radius: 0;
}

.tl-textarea label {
  font-weight: 700;
}

.tl-textarea .hint-text {
  margin-block: 0;
  color: var(--colour-hint);
}

.tl-textarea textarea:focus-visible {
  outline: 5px solid var(--colour-focus-highlight);
  box-shadow: inset 0 0 0 2px var(--colour-focus-contrasting);
}

.tl-textarea--error {
  padding-inline-start: 1.5rem;
  border-inline-start: 0.4rem solid var(--colour-error);
}

.tl-textarea--error .error-message {
  margin-block: 0;
  font-weight: 700;
  color: var(--colour-error);
}

.tl-textarea--error textarea:not(:focus-visible) {
  border-color: var(--colour-error);
}

button {
    margin: 1rem;
  }

HTML
CSS

<div class="tl-textarea tl-textarea--error">
  <label for="textarea-1"> Message </label>

  <p id="textarea-1-hint" class="hint-text">Give as much detail as you can</p>

  <p class="error-message" id="textarea-1-error">
    <span class="visually-hidden">Error: </span>
    Enter your message
  </p>

  <textarea
    id="textarea-1"
    aria-invalid="true"
    aria-describedby="textarea-1-hint textarea-1-error"
  ></textarea>
</div>

/* -------------------------------------------------------------------------- */
/* Textarea                                                                   */
/* -------------------------------------------------------------------------- */

.tl-textarea {
  --colour-text: var(--tl-colour-text, #222222);
  --colour-background: var(--tl-colour-page, #ffffff);
  --colour-border: var(--tl-colour-text, #222222);
  --colour-hint: var(--tl-colour-grey, #666666);
  --colour-error: var(--tl-colour-error, #ca3535);
  --colour-focus-highlight: var(--tl-colour-highlight-focus, #7f238b);
  --colour-focus-contrasting: var(--tl-colour-text, #222222);
}

.tl-textarea {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-inline-size: 60ch;
  padding: 1rem;
  color: var(--colour-text);
}

.tl-textarea textarea {
  block-size: 8rem;
  padding: 0.5em;
  font-size: 1rem;
  color: var(--colour-text);
  background-color: var(--colour-background);
  border: 2px solid var(--colour-border);
  border-radius: 0;
}

.tl-textarea label {
  font-weight: 700;
}

.tl-textarea .hint-text {
  margin-block: 0;
  color: var(--colour-hint);
}

.tl-textarea textarea:focus-visible {
  outline: 5px solid var(--colour-focus-highlight);
  box-shadow: inset 0 0 0 2px var(--colour-focus-contrasting);
}

.tl-textarea--error {
  padding-inline-start: 1.5rem;
  border-inline-start: 0.4rem solid var(--colour-error);
}

.tl-textarea--error .error-message {
  margin-block: 0;
  font-weight: 700;
  color: var(--colour-error);
}

.tl-textarea--error textarea:not(:focus-visible) {
  border-color: var(--colour-error);
}

HTML
CSS

<div class="tl-textarea">
  <label for="textarea-1"> Message (optional) </label>

  <textarea id="textarea-1"></textarea>
</div>

/* -------------------------------------------------------------------------- */
/* Textarea                                                                   */
/* -------------------------------------------------------------------------- */

.tl-textarea {
  --colour-text: var(--tl-colour-text, #222222);
  --colour-background: var(--tl-colour-page, #ffffff);
  --colour-border: var(--tl-colour-text, #222222);
  --colour-hint: var(--tl-colour-grey, #666666);
  --colour-error: var(--tl-colour-error, #ca3535);
  --colour-focus-highlight: var(--tl-colour-highlight-focus, #7f238b);
  --colour-focus-contrasting: var(--tl-colour-text, #222222);
}

.tl-textarea {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-inline-size: 60ch;
  padding: 1rem;
  color: var(--colour-text);
}

.tl-textarea textarea {
  block-size: 8rem;
  padding: 0.5em;
  font-size: 1rem;
  color: var(--colour-text);
  background-color: var(--colour-background);
  border: 2px solid var(--colour-border);
  border-radius: 0;
}

.tl-textarea label {
  font-weight: 700;
}

.tl-textarea .hint-text {
  margin-block: 0;
  color: var(--colour-hint);
}

.tl-textarea textarea:focus-visible {
  outline: 5px solid var(--colour-focus-highlight);
  box-shadow: inset 0 0 0 2px var(--colour-focus-contrasting);
}

.tl-textarea--error {
  padding-inline-start: 1.5rem;
  border-inline-start: 0.4rem solid var(--colour-error);
}

.tl-textarea--error .error-message {
  margin-block: 0;
  font-weight: 700;
  color: var(--colour-error);
}

.tl-textarea--error textarea:not(:focus-visible) {
  border-color: var(--colour-error);
}

What problems it solves

A textarea allows people to enter long multi-line freeform text, which a standard single-line text input cannot do.

When to use it

Use the textarea component when:

People are allowed to enter free-text input
People may want to enter a large amount of text

When not to use it

Do not use the textarea component when:

People should select an item from a predefined list of options (use radio buttons, checkboxes or a <select> instead)
People are expected to enter a brief line of text only (use the text input component instead)

Where to use it

Textareas are commonly used in forms where people are expected to express thoughts, give feedback or provide detailed information.

Assistive technology compatibility

This component has been tested with the following browsers and assistive technologies.

Assistive technology	Result	Notes
Keyboard	No issues	No notes
Voice Access/Chrome 154.0.8/Windows 11	No issues	No notes
JAWS 2026.2603.86/Chrome 154.0.8/Windows 11	No issues	No notes
NVDA 2026.1.1/Firefox 157.0/Windows 11	No issues	No notes
VoiceOver/Safari macOS Tahoe 26.6	No issues	No notes
VoiceOver/Safari/iOS 26.0	No issues	No notes
TalkBack/Chrome 154.0.8/Android 17	No issues	No notes
Windows Contrast themes	No issues	No notes
Windows Magnifier and/or Apple Zoom	No issues	No notes
Browser zoom	No issues	No notes
prefers-reduced-motion	Not applicable	There are no animations to reduce

Last updated: 13 October 2026.