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 setting the size property to small, medium or large. By default, the textarea has size medium.

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

You can place textarea element inside a form field

LabelThis is a help textLabelThis is a help textLabelThis is a help text

<qtm-form-field>
  <qtm-form-label for="textarea" size="small">
    <span>Label</span>
  </qtm-form-label>
  <qtm-textarea placeholder="Small" size="small" input-id="textarea"></qtm-textarea>
  <qtm-form-caption size="small">This is a help text</qtm-form-caption>
</qtm-form-field>
...

Disabled

Set disabled property to true to disable the component.

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

Resize

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 set the resize property to true to enable the drag icon.

<qtm-textarea placeholder="Textarea should be resizable" resize></qtm-textarea>

Value

Control textarea value by using value attribute.

<qtm-textarea value="Textarea content"></qtm-textarea>

Severity

Error

Set the property severity to error in the component to change textarea border color and icon in error severity.

<qtm-textarea
  severity="error"
  placeholder="Enter at least one interest."
></qtm-textarea>

Warning

Set the property severity to warning in the component to change textarea border color and icon in warning severity.

<qtm-textarea
  severity="warning"
  placeholder="Enter at least one interest."
></qtm-textarea>

Success

Set the property severity to success in the component to change icon in success severity.

<qtm-textarea
  severity="success"
  placeholder="Enter at least one interest."
></qtm-textarea>

<textarea> attributes

You can apply any standard <textarea> attributes (e.g., maxlength etc.) to the Text Area component through the props property.

<qtm-textarea
  placeholder="Textarea"
  classes="w-23xl"
  props='{"maxlength":"5"}'
></qtm-textarea>

API

Loading API documentation...