Skip to main content
🏠FormText AreaVersion: Next

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>