Fijn

Radio group component: Disabled 

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Uitwerkingsplan aanwezig</label>
    <div class="w-100">
        <div class="form-row">
            <div class="col-6">

                <div class="custom-control custom-radio -border -fill custom-control-inline mr-0 -disabled -checked">
                    <input type="radio" id="customRadio15720" name="keuze" value="Ja" class="custom-control-input" disabled checked>
                    <label class="custom-control-label absolute d-flex align-items-center" for="customRadio15720">Ja</label>
                </div>
            </div>
            <div class="col-6">

                <div class="custom-control custom-radio -border -fill custom-control-inline mr-0 -disabled">
                    <input type="radio" id="customRadio8886" name="keuze" value="Nee" class="custom-control-input" disabled>
                    <label class="custom-control-label absolute d-flex align-items-center" for="customRadio8886">Nee</label>
                </div>
            </div>
        </div>
    </div>

</div>
 
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">{{label}}</label>
    <div class="w-100">
        <div class="form-row">
            <div class="col-6">
                {% render '@radio-button', {label:"Ja", fill: true, border:true, invalid:invalid, valid:valid, disabled:disabled, checked:checked}, true %}
            </div>
            <div class="col-6">
                {% render '@radio-button', {label:"Nee", fill: true, border:true, invalid:invalid, valid:valid, disabled:disabled}, 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": "Uitwerkingsplan aanwezig",
  "invalid": false,
  "valid": false,
  "feedback_message": "Radio button field is invalid",
  "show_feedback": false,
  "disabled": true,
  "checked": true
}

Custom radio

Radio buttons are build by using the Bootstrap .custom-radio component. This component uses a real input radio button which is hidden. By using the label a radio button is simulated with CSS. By using the CSS :checked selector the appropriate styling for a checked radio button is applied.

The real input radio button is checked by linking the label with the radio button using the for="" attribute. Make sure these are linked correctly.

Deprecated

Use advanced radio button, also for simple radio button options.