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 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...