Text field - Forms

Default text field

Label (optional)

This is the input's helper text.

<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

Label (optional)

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

Label (optional)

This is the input's helper text.

This is the error message

Fullscreen

<div class="ecl-form-group"><label for="example-input-id-1" class="ecl-form-label ecl-form-label--invalid">Label<span
      class="ecl-form-label__optional"> (optional)</span></label>
  <div class="ecl-help-block">This is the input&#x27;s helper text.</div>
  <div class="ecl-feedback-message"><svg class="ecl-icon ecl-icon--m ecl-feedback-message__icon" focusable="false"
      aria-hidden="true">
      <use xlink:href="/icons.svg#error"></use>
    </svg> This is the error message</div><input type="text" id="example-input-id-1"
    class="ecl-text-input ecl-text-input--invalid ecl-text-input--m" placeholder="Placeholder text" />
</div>

Try it yourself on the playground

Playground

Required text field

Label*

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