Component library

Textarea component

Last updated 2 November 2026

Defines a textarea field.

Live demo

<ins-textarea
  label="Content"
  placeholder="Add your comments"
  value="This is a sample content."
  maxlength="300"
  counter="increasing"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-textarea>

<style>
  ins-textarea .ins-ta textarea {
      min-height: 120px;
      resize: none;
  }
</style>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
disabled	boolean	false	true, false	Disables the field
readonly	boolean	false	true, false	Make the field readonly
has-error	boolean	false	true, false	Defines if the field is invalid / error
error-message	string	""	any	Message shown when field has error
required	boolean	false	true, false	Specifies that the input field must be filled out before submitting the form
maxlength	string	""	any	Defines the textarea maximum character count
counter	string	increasing	increasing, decreasing	Displays a character counter
placeholder	string	""	any	Defines the field placeholder and shows when field is empty
label	string	""	any	Label shown for the field
name	string	""	any	Defines the field name
value	string	""	any	Defines the field value
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value

Events

EVENT	OBJECT	DESCRIPTION
insInput	keyboard event	Emits keyboard event on keypress
insValueChange	value	Emits textarea value on change

Examples

Default State

<ins-textarea></ins-textarea>

Description Example

<ins-textarea
  label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
</ins-textarea>

Error State

<ins-textarea 
  label="Error Field" 
  has-error error-message="This is a required field">
</ins-textarea>

Disabled State

<ins-textarea 
  label="Disabled Field" 
  value="You cannot edit this value" 
  Disabled>
</ins-textarea>

Read-Only State

<ins-textarea 
  label="Readonly Field" 
  value="You cannot edit this value" 
  Readonly>
</ins-textarea>

Direct Value Set

<ins-textarea 
  id="directFieldEl">
</ins-textarea>

<script>
  var label = "Set Data*";
  var name = "sample";
  var value = "This is a sample content.";
  var field = document.getElementById('directFieldEl');
  field.addEventListener('didLoad', function(e){
    field.name = name;
    field.label = label;
    field.value = value;
  });
</script>

Events

<ins-textarea 
  id="eventFieldEl" 
  name="sample" 
  label="Content" 
  placeholder="Content placeholder">
</ins-textarea>

<script>
  let field = document.getElementById('eventFieldEl');
      field.addEventListener('oninput', event => {
        var event = event.detail;
        console.log("Textarea keypress event", event);
      });
      field.addEventListener('valueChange', event => {
        var event = event.detail;
        console.log("Value change event", event);
        alert("Check console log for event data");
      });
</script>