Text area

Use the text area component when you need to let users enter an amount of text that’s longer than a single line. If you need to let users enter shorter answers no longer than a single line, such as a phone number or name, use the text input component.

Do not use the text area to ask a complex question. Split it into simple questions, where you can use text input or radio button components instead.

Use appropriately sized text areas

Think about how much text you expect a user to enter. The default height of the text area component is 140px. You can change this, if you expect the user to enter more or less text, using the min-height attribute.

The area expands automatically if the user enters an amount of text that’s larger than the size you’ve set.

Give details of the support you provide

<div class="text-area field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block text-area__label"
      >Give details of the support you provide</label
    >
  </div>
  <textarea
    id="description"
    class="text-area__input field__input"
    name="Give details of the support you provide"
    maxlength="10000"
    style="min-height: 140px;"
  ></textarea>
</div>

With hint text

Give details of the support you provide

For example, mental health, personal care or difficult behaviour

<div class="text-area field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block text-area__label">
      What's the problem about?
      <h6 class="field__instructions">
        For example, mental health, personal care or difficult behaviour
      </h6>
    </label>
  </div>
  <textarea
    id="description"
    class="text-area__input field__input"
    name="Give details of the support you provide"
    maxlength="10000"
  ></textarea>
</div>

With word count

You can add a word count to a text area so a user knows how much more they can enter, when there is a limit.

Users can enter or paste in more than the word count. They then get a warning rather than losing any of it, allowing them to edit their text down.

Give details of the support you provide

For example, mental health, personal care or difficult behaviour

You have 68 words remaining

HTML5

<div class="text-area field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block text-area__label">
      What's the problem about?
      <h6 class="field__instructions">
        For example, mental health, personal care or difficult behaviour
      </h6>
    </label>
  </div>
  <textarea
    id="description"
    class="text-area__input field__input"
    name="Give details of the support you provide"
    maxlength="10000"
  ></textarea>
  <p
    class="field__instructions text-area__word-count"
    id="word-count-instructions"
  ></p>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const textarea = document.getElementById("description");
  const instructions = document.getElementById("word-count-instructions");

  const maxWords = 68;

  const calculateWordCount = (text) =>
    text.trim() === "" ? 0 : text.trim().split(/\s+/).length;

  const updateWordCount = () => {
    const wordCount = calculateWordCount(textarea.value);
    const remaining = maxWords - wordCount;
    const isNegative = remaining < 0;

    instructions.textContent = `You have ${Math.abs(remaining)} words ${
      isNegative ? "too many" : "remaining"
    }.`;

    if (isNegative) {
      instructions.classList.add("field__instructions__error");
    } else {
      instructions.className = "field__instructions";
    }
  };

  textarea.addEventListener("input", updateWordCount);

  updateWordCount();
});

With error

Display an inline error when there's something wrong.

Example 1

If the question is mandatory and the user hasn’t entered any text.

Give details of the support you provide

For example, mental health, personal care or difficult behaviour

You need to enter details of the support you provide

HTML5

<div class="text-area field" id="textarea-field">
  <div class="bcc-form-question">
    <label class="field__label field__label--block text-area__label">
      Give details of the support you provide
      <h6 class="field__instructions" id="hint">
        For example, mental health, personal care, or difficult behaviour
      </h6>
    </label>
  </div>
  <textarea
    id="description"
    class="text-area__input field__input"
    name="description"
    maxlength="10000"
  ></textarea>
  <div class="field__message field__instructions__error" id="error-message">
    You need to enter details of the support you provide.
  </div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const textarea = document.getElementById("description");
  const field = document.getElementById("textarea-field");
  const errorMessage = document.getElementById("error-message");
  const hint = document.getElementById("hint");

  const updateErrorState = () => {
    const value = textarea.value.trim();
    const isEmpty = value.length === 0;

    if (isEmpty) {
      field.classList.add("field--error");
      errorMessage.style.display = "block";
      hint.classList.add("field__instructions__error");
    } else {
      field.classList.remove("field--error");
      errorMessage.style.display = "none";
      hint.classList.remove("field__instructions__error");
    }
  };

  textarea.addEventListener("input", updateErrorState);
  textarea.addEventListener("blur", updateErrorState);

  updateErrorState();
});

Example 2

If the user tries to submit an amount of words when they’ve exceeded the word limit, show an error message that tells them by how many.

Give details of the support you provide

For example, mental health, personal care or difficult behaviour

Your description must be 50 words or less

I provide thorough and empathetic support for individuals facing mental health challenges, personal care needs, or difficult behaviours. This support includes helping with daily tasks, managing personal hygiene, addressing challenging behaviours, and promoting mental well-being. My goal is to encourage independence, build resilience, and create a positive environment for personal growth. I work in close consultation with the family and friends of each person I treat

You have 16 words too many

HTML5

<div class="text-area field field--error" id="textarea-field">
  <div class="bcc-form-question">
    <label
      class="field__label field__label--block text-area__label"
    >
      Give details of the support you provide
      <h6 class="field__instructions field__instructions__error" id="hint">
        For example, mental health, personal care or difficult behaviour
      </h6>
    </label>
  </div>
  <div
    id="error-message"
    class="field__message field__instructions__error text-area__bold text-area__label"
  >
    Your description must be 50 words or less
  </div>
  <textarea
    aria-describedby="description-error"
    required=""
    id="description"
    class="text-area__input field__input"
    name="description"
    maxlength="10000"
  >
    I provide thorough and empathetic support for individuals facing mental health challenges, personal care needs, or difficult behaviours. This support includes helping with daily tasks, managing personal hygiene, addressing challenging behaviours, and promoting mental well-being. My goal is to encourage independence, build resilience, and create a positive environment for personal growth. I work in close consultation with the family and friends of each person I treat  </textarea
  >
  <p
    class="field__instructions field__instructions__error text-area__word-count text-area__bold"
    id="word-count-instructions"
  ></p>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const textarea = document.getElementById("description");
  const field = document.getElementById("textarea-field");
  const errorMessage = document.getElementById("error-message");
  const hint = document.getElementById("hint");
  const instructions = document.getElementById("word-count-instructions");

  const maxWords = 50;

  const calculateWordCount = (text) =>
    text.trim() === "" ? 0 : text.trim().split(/\s+/).length;

  const updateWordCount = () => {
    const wordCount = calculateWordCount(textarea.value);
    const remaining = maxWords - wordCount;
    const isNegative = remaining < 0;

    instructions.textContent = `You have ${Math.abs(remaining)} words ${
      isNegative ? "too many" : "remaining"
    }.`;

    if (isNegative) {
      instructions.classList.add("field__instructions__error");
    } else {
      instructions.className = "field__instructions";
    }
  };

  const updateErrorState = () => {
    const value = textarea.value.trim();
    const isEmpty = value.length === 0;

    const error = false;

    if (error) {
      field.classList.add("field--error");
      errorMessage.style.display = "block";
      hint.classList.add("field__instructions__error");
      instructions.classList.add("text-area__bold");
    } else {
      field.classList.remove("field--error");
      errorMessage.style.display = "none";
      hint.classList.remove("field__instructions__error");
      instructions.classList.remove("text-area__bold");
    }
  };

  textarea.addEventListener("input", updateErrorState);
  textarea.addEventListener("blur", updateErrorState);
  textarea.addEventListener("input", updateWordCount);

  updateWordCount();
});