51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Password

100% 
<!-- enter password -->
<fieldset class="o-form__field">
    <div class="o-form__fluid">
        <input type="password" class="o-form__input o-form__input--password" id="myPasswordId_01" placeholder="Please enter your password" aria-describedby="input-1" required>
        <label class="o-form__label"> Input type: password</label>
    </div>
    <span class="o-form__status o-form__status--warning">
         This field has to be filled.
        </span>
    <p class="o-form__info" id="input-1">*Pflichtfeld</p>
</fieldset>
<!-- re-enter password -->
<fieldset class="o-form__field">
    <div class="o-form__fluid">
        <input type="password" class="o-form__input o-form__input--password" data-equalto="myPasswordId_01" placeholder="Please enter your password" aria-describedby="input-2" required>
        <label class="o-form__label"> Input type: password</label>
    </div>
    <p class="o-form__info" id="input-2">Repeat your password please.</p>
    <span class="o-form__status o-form__status--warning">
           Password doesn't match!
        </span>
</fieldset>
 
<!-- enter password -->
<fieldset class="o-form__field">
    <div class="o-form__fluid">
        <input type="password" class="o-form__input o-form__input--password"
               id="{{ input.id }}"
            {% if input.placeholder %} placeholder="{{ input.placeholder }}"{% endif %}
               aria-describedby="{{ input.descriptionId }}"
               required>
        <label class="o-form__label">{% if input.label %} {{ input.label }}{% endif %}{% if required %}<span class="required">*</span>{% endif %}</label>
    </div>
    <span class="o-form__status o-form__status--warning">
         {{ input.error }}
        </span>
    <p class="o-form__info" id="{{ input.descriptionId }}">{{ input.descriptionText }}</p>
</fieldset>
<!-- re-enter password -->
<fieldset class="o-form__field">
    <div class="o-form__fluid">
        <input type="password" class="o-form__input o-form__input--password"
               data-equalto="{{ input.id }}"
            {% if input2.placeholder %} placeholder="{{ input2.placeholder }}"{% endif %}
               aria-describedby="{{ input2.descriptionId }}"
               required>
        <label class="o-form__label">{% if input2.label %} {{ input2.label }}{% endif %}{% if required %}<span class="required">*</span>{% endif %}</label>
    </div>
    <p class="o-form__info" id="{{ input2.descriptionId }}">{{ input2.descriptionText }}</p>
    <span class="o-form__status o-form__status--warning">
           {{ input2.error }}
        </span>
</fieldset>
 
{
  "input": {
    "label": "Input type: password",
    "id": "myPasswordId_01",
    "placeholder": "Please enter your password",
    "descriptionId": "input-1",
    "descriptionText": "*Pflichtfeld",
    "error": "This field has to be filled."
  },
  "input2": {
    "label": "Input type: password",
    "placeholder": "Please enter your password",
    "descriptionId": "input-2",
    "descriptionText": "Repeat your password please.",
    "error": "Password doesn't match!"
  }
}

There are no notes for this item.