Textarea

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

<ins-textarea></ins-textarea>

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

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

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

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

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