Forms

Text field

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-form-label" for="text-input-id">Label</label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><input type="text" id="text-input-id"
    name="text-input-name" class="ecl-text-input ecl-text-input--m" />
</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-input"><label class="ecl-form-label ecl-form-label--disabled"
    for="text-input-id-2">Label</label>
  <div class="ecl-help-block ecl-help-block--disabled">This is the input&#x27;s helper text.</div><input type="text"
    id="text-input-id-2" name="text-input-name" class="ecl-text-input ecl-text-input--m" disabled="" />
</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-input"><label class="ecl-form-label ecl-form-label--invalid"
    for="text-input-id-3">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><input type="text" id="text-input-id-3"
    name="text-input-name" class="ecl-text-input ecl-text-input--invalid ecl-text-input--m" />
</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-input"><label class="ecl-form-label" for="text-input-id-4">Label<span
      class="ecl-form-label__required">*</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><input type="text" id="text-input-id-4"
    name="text-input-name" class="ecl-text-input ecl-text-input--m" required="" />
</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-input"><label class="ecl-form-label" for="text-input-id-5">Label<span
      class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><input type="text" id="text-input-id-5"
    name="text-input-name" class="ecl-text-input ecl-text-input--m" />
</div>

Try it yourself on the playground

Playground

Widths

Small

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-form-label" for="text-input-id-6">Label</label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><input type="text" id="text-input-id-6"
    name="text-input-name" class="ecl-text-input ecl-text-input--s" />
</div>

Try it yourself on the playground

Playground

Medium

This is the input's helper text.
Fullscreen
<div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-form-label" for="text-input-id-7">Label</label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><input type="text" id="text-input-id-7"
    name="text-input-name" class="ecl-text-input ecl-text-input--m" />
</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-input"><label class="ecl-form-label" for="text-input-id-8">Label</label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div><input type="text" id="text-input-id-8"
    name="text-input-name" class="ecl-text-input ecl-text-input--l" />
</div>

Try it yourself on the playground

Playground