Forms

Text area

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

Try it yourself on the playground

Playground

Disabled

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-area"><label class="ecl-form-label ecl-form-label--disabled"
    for="example2">Label</label>
  <div class="ecl-help-block ecl-help-block--disabled">This is the input&#x27;s helper text.</div><textarea
    id="example2" rows="4" disabled="" class="ecl-text-area ecl-text-area--m"></textarea>
</div>

Try it yourself on the playground

Playground

With error

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-area"><label class="ecl-form-label ecl-form-label--invalid"
    for="example3">Label</label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div>
  <div class="ecl-feedback-message">This is the error message</div><textarea id="example3" rows="4"
    class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"></textarea>
</div>

Try it yourself on the playground

Playground

Required

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-area"><label class="ecl-form-label" for="example4">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="example4" rows="4"
    class="ecl-text-area ecl-text-area--m" required=""></textarea>
</div>

Try it yourself on the playground

Playground

Optional

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-area"><label class="ecl-form-label" for="example5">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="example5" rows="4"
    class="ecl-text-area ecl-text-area--m"></textarea>
</div>

Try it yourself on the playground

Playground

Widths

Medium

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

Try it yourself on the playground

Playground

Large

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-area"><label class="ecl-form-label" for="example7">Label</label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><textarea id="example7" rows="4"
    class="ecl-text-area ecl-text-area--l"></textarea>
</div>

Try it yourself on the playground

Playground