Fijn

Radio group component: Valid With Feedback Message 

<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 is-valid">
                    <input type="radio" id="customRadio74259" name="keuze" value="Ja" class="custom-control-input">
                    <label class="custom-control-label cursor-pointer absolute d-flex align-items-center" for="customRadio74259">Ja</label>
                </div>
            </div>
            <div class="col-6">

                <div class="custom-control custom-radio -border -fill custom-control-inline mr-0 is-valid">
                    <input type="radio" id="customRadio55139" name="keuze" value="Nee" class="custom-control-input">
                    <label class="custom-control-label cursor-pointer absolute d-flex align-items-center" for="customRadio55139">Nee</label>
                </div>
            </div>
        </div>
    </div>
    <div class="valid-feedback d-inline-block"><strong>Radio button field is valid</strong></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": true,
  "feedback_message": "Radio button field is valid",
  "show_feedback": true,
  "disabled": false,
  "checked": false
}
  • Handle: @radio-button-group--valid-with-feedback-message
  • Preview:
  • Filesystem Path: templates/fractal/atoms/_radio-button-group/_radio-button-group.njk
  • References (1): @radio-button

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.