Forms

Text area

Default text area

This is the input's helper text.
Fullscreen
<div class="ecl-form-group"><label class="ecl-form-label" for="example-textarea-id-1">Label<span
      class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><textarea id="example-textarea-id-1"
    class="ecl-text-area ecl-text-area--m" rows="4" placeholder="Placeholder text"></textarea>
</div>

Try it yourself on the playground

Playground

Disabled text area

This is the input's helper text.
Fullscreen
<div class="ecl-form-group"><label class="ecl-form-label ecl-form-label--disabled"
    for="example-textarea-id-1">Label<span class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block ecl-help-block--disabled">This is the input&#x27;s helper text.</div><textarea
    id="example-textarea-id-1" class="ecl-text-area ecl-text-area--m" rows="4" placeholder="Placeholder text"
    disabled=""></textarea>
</div>

Try it yourself on the playground

Playground

Invalid text area

This is the input's helper text.
Fullscreen

Try it yourself on the playground

Playground

Required text area

This is the input's helper text.
Fullscreen
<div class="ecl-form-group"><label class="ecl-form-label" for="example-textarea-id-1">Label<span
      class="ecl-form-label__required">*</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><textarea id="example-textarea-id-1"
    class="ecl-text-area ecl-text-area--m" rows="4" placeholder="Placeholder text" required=""></textarea>
</div>

Try it yourself on the playground

Playground