Default text field
This is the input's helper text.
<div class="ecl-form-group"><label for="example-input-id-1" id="example-input-id-1-label" class="ecl-form-label">Label<span class="ecl-form-label__optional" role="note" aria-label="optional">(optional)</span></label> <div class="ecl-help-block" id="example-input-id-1-helper">This is the input's helper text.</div><input id="example-input-id-1" class="ecl-text-input ecl-text-input--m" type="text" placeholder="Placeholder text" aria-describedby="example-input-id-1-helper" /> </div>
Try it yourself on the playground
PlaygroundDisabled text field
This is the input's helper text.
<div class="ecl-form-group"><label for="example-input-id-1" id="example-input-id-1-label" class="ecl-form-label ecl-form-label--disabled">Label<span class="ecl-form-label__optional" role="note" aria-label="optional">(optional)</span></label> <div class="ecl-help-block ecl-help-block--disabled" id="example-input-id-1-helper">This is the input's helper text. </div><input id="example-input-id-1" class="ecl-text-input ecl-text-input--m" type="text" placeholder="Placeholder text" disabled aria-describedby="example-input-id-1-helper" /> </div>
Try it yourself on the playground
PlaygroundInvalid text field
This is the input's helper text.
<div class="ecl-form-group"><label for="example-input-id-1" id="example-input-id-1-label" class="ecl-form-label ecl-form-label--invalid">Label<span class="ecl-form-label__optional" role="note" aria-label="optional">(optional)</span></label> <div class="ecl-help-block" id="example-input-id-1-helper">This is the input's helper text.</div><input id="example-input-id-1" class="ecl-text-input ecl-text-input--invalid ecl-text-input--m" type="text" placeholder="Placeholder text" aria-describedby="example-input-id-1-helper example-input-id-1-invalid" aria-invalid="true" /> <div class="ecl-feedback-message" id="example-input-id-1-invalid"><svg class="ecl-icon ecl-icon--s ecl-feedback-message__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#error"></use> </svg>This is the error message</div> </div>
Try it yourself on the playground
PlaygroundRequired text field
This is the input's helper text.
<div class="ecl-form-group"><label for="example-input-id-1" id="example-input-id-1-label" class="ecl-form-label">Label<span class="ecl-form-label__required" role="note" aria-label="required">*</span></label> <div class="ecl-help-block" id="example-input-id-1-helper">This is the input's helper text.</div><input id="example-input-id-1" class="ecl-text-input ecl-text-input--m" type="text" placeholder="Placeholder text" required aria-describedby="example-input-id-1-helper" /> </div>
Try it yourself on the playground
Playground