Forms

Text field

Default text field

This is the input's helper text.
Fullscreen
<div class="ecl-form-group"><label for="example-input-id-1" class="ecl-form-label">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="example-input-id-1"
    class="ecl-text-input ecl-text-input--m" placeholder="Placeholder text" />
</div>

Try it yourself on the playground

Playground

Disabled text field

This is the input's helper text.
Fullscreen
<div class="ecl-form-group"><label for="example-input-id-1" class="ecl-form-label ecl-form-label--disabled">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><input type="text"
    id="example-input-id-1" class="ecl-text-input ecl-text-input--m" placeholder="Placeholder text" disabled="" />
</div>

Try it yourself on the playground

Playground

Invalid text field

This is the input's helper text.
Fullscreen

Try it yourself on the playground

Playground

Required text field

This is the input's helper text.
Fullscreen
<div class="ecl-form-group"><label for="example-input-id-1" class="ecl-form-label">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="example-input-id-1"
    class="ecl-text-input ecl-text-input--m" placeholder="Placeholder text" required="" />
</div>

Try it yourself on the playground

Playground