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.

<TextArea placeholder="Small" size="small" />
<TextArea placeholder="Medium" size="medium" />
<TextArea placeholder="Large" size="large" />

You can place textarea element inside a form field

Label

This is a help text

Label

This is a help text

Label

This is a help text

<FormField>
  <FormLabel htmlFor="textarea-small" size="small">
    <span>Label</span>
  </FormLabel>
  <TextArea
    placeholder="Small"
    size="small"
    id="textarea-small"
  />
  <FormCaption size="small">This is a help text</FormCaption>
</FormField>
...

Disabled

Set disabled property to true to disable the component.

<TextArea disabled placeholder="Disabled" />

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.

<TextArea placeholder="Textarea should be resizable" resize />

Value

Control textarea value by using value attribute.

Textarea content

<TextArea value="Textarea content" />

Severity

Error

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

error

<TextArea
  severity="error"
  placeholder="Enter at least one interest."
/>

Warning

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

warning

<TextArea
  severity="warning"
  placeholder="Enter at least one interest."
/>

Success

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

check_circle

<TextArea
  severity="success"
  placeholder="Enter at least one interest."
/>

Event Handling

The TextArea component provides several event handlers to manage user interactions. The most commonly used is onChange, which is triggered when the textarea content changes.

onChange

const handleChange = (event) => {
  // event.target.value contains the current textarea content
  console.log('New value:', event.target.value);
  
  // You can update state or perform other actions
  setDescription(event.target.value);
  validateTextLength(event.target.value);
};

<TextArea 
  placeholder="Type something..."
  onChange={handleChange}
/>

onFocus and onBlur

You can also handle focus events:

const handleFocus = (event) => {
  console.log('TextArea gained focus');
  // You might want to track when users interact with the field
  trackFieldInteraction('description');
};

const handleBlur = (event) => {
  console.log('TextArea lost focus');
  // You can validate the field when the user is done typing
  validateField(event.target.value);
};

<TextArea 
  placeholder="Type something..."
  onFocus={handleFocus}
  onBlur={handleBlur}
/>

onKeyDown and onKeyUp

For more advanced interactions, you can handle keyboard events:

const handleKeyDown = (event) => {
  // Check for specific key combinations
  if (event.ctrlKey && event.key === 'Enter') {
    console.log('Ctrl+Enter pressed - submitting form');
    submitForm();
  }
};

<TextArea 
  placeholder="Press Ctrl+Enter to submit"
  onKeyDown={handleKeyDown}
/>

Note that when a textarea is disabled (disabled={true}), these events will not be triggered.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

<TextArea 
  classes="shadow-m-light"
  placeholder="Custom styled textarea"
/>

API

QtmTextarea

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
onBlur	CustomEvent<void>	Callback fired when the text area element loses focus.
onFocus	CustomEvent<void>	Callback fired when the text area element has focus.
onValueChanged	CustomEvent<string>	Callback fired when the value is changed through the user interface. You can pull out the new value by accessing event.detail