Text Area

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Sizes

Control the size of a textarea by using .qtm-small, .qtm-medium or .qtm-large utilities. By default, the textarea has size medium.

<div class="qtm-textarea qtm-small">
  <textarea placeholder="Small"></textarea>
</div>
<div class="qtm-textarea qtm-medium">
  <textarea placeholder="Medium"></textarea>
</div>
<div class="qtm-textarea qtm-large">
  <textarea placeholder="Large"></textarea>
</div>

You can place textarea element inside a form field

Small0This is a help textMedium0This is a help textLarge0This is a help text

<div class="qtm-form-field">
  <label class="qtm-form-label qtm-small" for="textarea">
    <span>Label</span>
    <span class="qtm-counter">0</span>
  </label>
  <div class="qtm-textarea qtm-small">
    <textarea placeholder="Small" id="textarea"></textarea>
  </div>
  <p class="qtm-form-caption qtm-small">This is a help text</p>
</div>
...

Disabled

Add .qtm-disabled in the element .qtm-textarea wrapper and textarea to disable these elements.

<div class="qtm-textarea qtm-disabled">
  <textarea placeholder="Disabled" disabled></textarea>
</div>

Drag icon

Text areas can either be a fixed size or can be resizable with a drag icon in the bottom right corner. By default, the drag icon should be hidden and the text area should not be resizable. You can add .qtm-drag-icon in the textarea wrapper to resize your textarea.

Label0This is a help text

<div class="qtm-form-field">
  <label class="qtm-form-label" for="textarea">
    <span>Label</span>
    <span class="qtm-counter">0</span>
  </label>
  <div class="qtm-textarea qtm-drag-icon">
    <textarea
      placeholder="Textarea should be resizable"
      id="textarea"
    ></textarea>
  </div>
  <p class="qtm-form-caption">This is a help text</p>
</div>

Validation states

Error

Add .qtm-error in textarea wrapper to change textarea border color and icon color in error state.

InterestsEnter at least one interest.

<div class="qtm-form-field">
  <label class="qtm-form-label qtm-required" for="textarea">
    <span>Interests</span>
  </label>
  <div class="qtm-textarea qtm-error">
    <textarea
      placeholder="Textarea should be resizable"
      id="textarea"
      required
    ></textarea>
    <i class="material-icons qtm-icon">error</i>
  </div>
  <p class="qtm-form-caption qtm-error">Enter at least one interest.</p>
</div>

Warning

Add .qtm-warning in textarea wrapper to change textarea border color and icon color in warning state.

InterestsEnter at least one interest.

<div class="qtm-form-field">
  <label class="qtm-form-label qtm-required" for="textarea">
    <span>Interests</span>
  </label>
  <div class="qtm-textarea qtm-warning">
    <textarea
      placeholder="Textarea should be resizable"
      id="textarea"
      required
    ></textarea>
    <i class="material-icons qtm-icon">warning</i>
  </div>
  <p class="qtm-form-caption qtm-warning">Enter at least one interest.</p>
</div>

Success

Add .qtm-success in textarea wrapper to changer icon color in success state.

Label

<div class="qtm-form-field">
  <label class="qtm-form-label qtm-required" for="textarea">
    <span>Label</span>
  </label>
  <div class="qtm-textarea qtm-success">
    <textarea
      placeholder="Textarea should be resizable"
      id="textarea"
      required
    ></textarea>
    <i class="material-icons qtm-icon">check_circle</i>
  </div>
  <p class="qtm-form-caption"></p>
</div>

Examples

Character counter is used if there is a character limit. The counter in the below example displays characters used.

Label0Max. 10 characters

<div class="qtm-form-field">
  <label class="qtm-form-label" for="textarea">
    <span>Label</span>
    <span id="count" class="qtm-counter">0</span>
  </label>
  <div class="qtm-textarea">
    <textarea type="text" placeholder="What's happening?"></textarea>
  </div>
  <p class="qtm-form-caption">Max. 10 characters</p>
</div>

<script>
    function setCounter() {
        document.getElementById('count').innerHTML = document.querySelector('textarea').value.length;
    }

    document.querySelector('textarea').addEventListener('keyup', function () {
        setCounter();
    });

    function initCounter() {
        setCounter();
    }

    initCounter();
</script>