@citizensadvice/cads-form-textareas

Form textareas

Component type

• Component

Dependencies:

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

Installation

$ 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" />

Implementation

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>
  </div>
</fieldset>