Fijn

Checkbox field component: Invalid 

<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" id="customCheck1" class="custom-control-input is-invalid ">
        <label class="custom-control-label cursor-pointer pl-1" for="customCheck1">Ik bevestig dat de welstandscommissie akkoord is met de conceptontwerpen</label>

    </div>
</div>
 
<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" id="customCheck1" {% if disabled %}disabled{% endif %} {% if checked %}checked{% endif %} class="custom-control-input {% if invalid %}is-invalid{% endif %} {% if valid %}is-valid{% endif %}">
        <label class="custom-control-label cursor-pointer pl-1" for="customCheck1">Ik bevestig dat de welstandscommissie akkoord is met de conceptontwerpen</label>
        {% 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>
</div>
 
{
  "label": "Checkbox",
  "invalid": true,
  "valid": false,
  "feedback_message": "Checkbox field is invalid",
  "show_feedback": false,
  "disabled": false,
  "checked": false
}

Validatie

Wanneer een veld onjuist is ingevuld moet de class .is-invalid of .is-valid toegevoegd worden aan het veld. Wanneer er een error message weergegeven moet worden gebruik dan de volgende html, zie voorbeeld:

<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" id="customCheck1"   class="custom-control-input is-invalid ">
        <label class="custom-control-label cursor-pointer pl-1" for="customCheck1">Ik bevestig dat de welstandscommissie akkoord is met de conceptontwerpen</label>
        <div class="invalid-feedback d-inline-block"><strong>Checkbox field is invalid</strong></div>
    </div>
</div>

Je kunt deze .invalid-feedback of .valid-feedback div al inladen omdat deze standaard wordt verborgen, door de class .d-inline-block toe te voegen wordt deze zichtbaar.