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

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
inputId	string		The id of the textarea element
name	string		The name of the textarea element
placeholder	string		The short hint displayed in the textarea before the user enters a value
props	string | { [key: string]: any; }		Attributes applied to the textarea element.
required	boolean	false	If true, the textarea element will be required
resize	boolean	false	If true, the component is vertically resizable.
severity	"error" | "success" | "warning"		The validation of severity
size	"large" | "medium" | "small"	'medium'	The size of element
value	string	''	The default value

Event	Type	Description
blur	CustomEvent<void>	Callback fired when the text area element loses focus.
focus	CustomEvent<void>	Callback fired when the text area element has focus.
value-changed	CustomEvent<string>	Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail