Fijn

Button group component: Invalid 

<div class="form-group d-flex flex-wrap w-100">
    <label class="flex-grow-1">Status</label>
    <ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100 is-invalid">
        <li><button type="button" class="btn btn-sm btn-primary -iconRight">

                Button

            </button></li>
        <li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">

                Button

            </button></li>
        <li><button type="button" class="btn btn-sm btn-outline-dark -iconRight">

                Button

            </button></li>
    </ul>

    <div class="invalid-feedback d-inline-block"><strong>Dit veld is verplicht</strong></div>

</div>
 
<div class="{% if not full_width %}form-group {% endif %}d-flex flex-wrap w-100">
    <label class="flex-grow-1">{{label}}</label>
    <ul class="m-buttonGroup list-unstyled d-flex flex-wrap w-100{% if full_width %} is-full flex-column flex-xs-row{% endif %}{% if invalid %} is-invalid{% endif %}">
        <li{% if full_width %} class="flex-grow-1"{% endif %}>{% render '@button', {small:true, text:text1, color:color, disabled:disabled, full_width:full_width}, true %}</li>
        <li{% if full_width %} class="flex-grow-1"{% endif %}>{% render '@button--border', {small:true, text:text2, disabled:disabled, full_width:full_width}, true %}</li>
        <li{% if full_width %} class="flex-grow-1"{% endif %}>{% render '@button--border', {small:true, text:text3, disabled:disabled, full_width:full_width}, true %}</li>
    </ul>
    {% if invalid %}
    <div class="invalid-feedback d-inline-block"><strong>Dit veld is verplicht</strong></div>
    {% endif %}
</div>
 
{
  "label": "Status",
  "invalid": true,
  "disabled": false,
  "full_width": false
}

No notes defined.