Skip to main content
🏠FormText AreaVersion: 2.0.0-beta.6

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>

API

qtm-textarea

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
inputIdstringThe id of the textarea element
namestringThe name of the textarea element
placeholderstringThe short hint displayed in the textarea before the user enters a value
propsstring | { [key: string]: any; }Attributes applied to the textarea element.
requiredbooleanfalseIf true, the textarea element will be required
resizebooleanfalseIf true, the component is vertically resizable.
severity"error" | "success" | "warning"The validation of severity
size"large" | "medium" | "small"'medium'The size of element
valuestring''The default value
EventTypeDescription
blurCustomEvent<void>Callback fired when the text area element loses focus.
focusCustomEvent<void>Callback fired when the text area element has focus.
valueChangedCustomEvent<string>Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail