Input field group component: Valid

Current release

HTML
View
Context
Info
Notes


        
        <div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1 d-flex align-items-center">Bestelnaam</label>
    <input name="inputField" type="text" class="form-control  is-valid" placeholder="Bestelnaam">

</div>


        <div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1 d-flex align-items-center">{{label}}{% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
    {% render '@input-field', {label:label, disabled:disabled, invalid:invalid, valid:valid}, true %}
    {% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>


        
            
            {
  "label": "Bestelnaam",
  "invalid": false,
  "valid": true,
  "feedback_message": "Input field is invalid",
  "show_feedback": false,
  "disabled": false
}

Handle: @input-field-group--valid
Preview:
- With layout
- Component only
Filesystem Path: templates/fractal/atoms/input-field-group/input-field-group.njk
References (2): @circle--tiny, @input-field

Validatie

When a field is invalid or valid, the class .is-invalid or .is-valid should be added to the field. If a feedback message should be displayed please look at the following example:

<input name="inputField" type="text" class="form-control is-invalid " placeholder="Bestelnaam" >

It is also possible to already add the feedback div to the HTML before the message is displayed to the user. This is because the .invalid-feedback or .valid-feedback are hidden by default. By adding the class .d-inline-block it will be visible.