Usage no npm install needed!

<script type="module">
  import citizensadviceCadsFormTextareas from 'https://cdn.skypack.dev/@citizensadvice/cads-form-textareas';


Form textareas

npm (scoped)

Component type

  • Component


Name Description
@citizensadvice/cads-support System-wide global variables and functions
@citizensadvice/cads-interactive-block Mixins for handling interactive element (buttons, inputs)


$ npm install @citizensadvice/cads-form-textareas
@import "@citizensadvice/cads-form-textareas/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-form-textareas@latest/build/cads.form-textareas.css" />


A textarea gives users a larger amount of space then just a single line text field to type their response. The height of your textarea will set expectations for the user on how much to enter. They may not know that the textarea can expand so make the height proportional to the amount of text to be entered.

<fieldset class="c-fieldset">
  <label class="c-label" for="message">Message:</label>
  <div class="c-textarea">
    <textarea id="message"></textarea>