Fijn

Advanced radio group component: Invalid With Feedback Message 

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1 d-flex align-items-center">Flora en Fauna onderzocht <div class="d-inline-block ml-2">
            <div class="a-circle -tiny -hover -border -pointer cursor-default" tabindex="0" data-toggle="popover" data-container="body" data-placement="top" data-trigger="hover" data-html="true" title="" data-custom-class="-info" data-content="Lorem ipsum dolor sit amet,&lt;br&gt; consectetur adipiscing elit nulla.">
                <i class="icon-info"></i>

            </div>
        </div></label>
    <div class="m-advancedRadioWrap w-100">
        <div class="form-row">
            <div class="col-6">

                <div class="m-advancedRadio is-invalid  overflow-hidden d-flex flex-wrap w-100">
                    <div class="d-flex w-100">
                        <div class="m-advancedRadio__left  position-relative">

                            <div class="custom-control custom-radio custom-control-inline mr-0">
                                <input type="radio" id="customRadio12908" name="advanced" value="Ja" class="custom-control-input">
                                <label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio12908">Ja</label>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-6">
                <div class="m-advancedRadio is-invalid  overflow-hidden d-flex flex-wrap w-100">
                    <div class="d-flex w-100">
                        <div class="m-advancedRadio__left  position-relative">

                            <div class="custom-control custom-radio custom-control-inline mr-0">
                                <input type="radio" id="customRadio16318" name="advanced" value="Nee" class="custom-control-input">
                                <label class="custom-control-label cursor-pointer d-flex align-items-center" for="customRadio16318">Nee</label>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="invalid-feedback d-inline-block"><strong>This field is invalid</strong></div>
</div>
 
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1 {% if info %}d-flex align-items-center{% endif %}">{{label}} {% if info %}<div class="d-inline-block ml-2">{% render '@circle--tiny' %}</div>{% endif %}</label>
    <div class="m-advancedRadioWrap w-100">
        <div class="form-row">
            <div class="{% if open %}col-8{% else %}col-6{% endif %}">
                {% set variant = 'default' %}
                {% if tabs %}
                    {% set variant = 'tabs' %}
                {% endif %}
                {% render '@advanced-radio--'+variant, {label:"Ja", invalid:invalid, valid:valid, textarea:textarea, open:open, extra_options:extra_options, disabled:disabled, checked:checked, tabs:tabs}, true %}
            </div>
            <div class="{% if open %}col-4{% else %}col-6{% endif %}">
                {% render '@advanced-radio', {label:"Nee", invalid:invalid, valid:valid, open:false, extra_options:extra_options, disabled:disabled, checked:false, tabs:tabs}, true %}
            </div>
        </div>
    </div>
    {% 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": "Flora en Fauna onderzocht",
  "invalid": true,
  "valid": false,
  "feedback_message": "This field is invalid",
  "show_feedback": true,
  "textarea": false,
  "disabled": false,
  "checked": false,
  "open": false,
  "extra_options": false,
  "info": true,
  "tabs": false
}

Disabled

When this component is disabled the addItem component in it (if it contains it) should be disabled as well. You can do this by adding the .-disabled class to the .m-addItem div.

Open and close

By default the following parts inside the advanced radio button are hidden: .m-advancedRadio__right and .m-advancedRadio__bottom. These parts can contain extra components like the add-item and list-group component. To show these parts add the class .-open to the .m-advancedRadio div. When these components are not available the .m-advancedRadio__right and .m-advancedRadio__bottom div’s should not be used.

When the advancedRadio button is opened to show the extra options the columns sizes above should be adjusted. By default they are divided 50/50 (.col-6), the radio button that is opened should have a .col-8 class and the other should have a .col-4 class.