DSO Toolkit homepage

Group Radios

Een radio group heeft een root element fieldset.form-group, en geen div.form-group.

<!-- Default -->
<fieldset class="form-group dso-radios" aria-describedby="helpTextId_input-radio">
    <legend class="dso-label-container">
        <span class="control-label">
            Kies soort auto
        </span>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-0" name="input-radio" value="1" checked>
            <label for="input-radio-0">
                benzine
            </label>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-1" name="input-radio" value="2">
            <label for="input-radio-1">
                diesel
            </label>

        </div>

        <p class="dso-help-block" id="helpTextId_input-radio">de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel goedkoper</p>

    </div>

</fieldset>
<!-- Input Radio Required -->
<fieldset class="form-group dso-radios dso-required" aria-describedby="helpTextId_input-radio-required">
    <legend class="dso-label-container">
        <span class="control-label">
            Kies soort auto
        </span>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-required-0" name="input-radio-required" value="1" checked>
            <label for="input-radio-required-0">
                benzine
            </label>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-required-1" name="input-radio-required" value="2">
            <label for="input-radio-required-1">
                diesel
            </label>

        </div>

        <p class="dso-help-block" id="helpTextId_input-radio-required">de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel goedkoper</p>

    </div>

</fieldset>
<!-- Input Radio Invalid -->
<fieldset class="form-group dso-radios dso-invalid dso-required" aria-describedby="helpTextId_input-radio-invalid">
    <legend class="dso-label-container">
        <span class="control-label">
            Kies soort auto
        </span>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1">
            <label for="input-radio-invalid-0">
                benzine
            </label>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2">
            <label for="input-radio-invalid-1">
                diesel
            </label>

        </div>

        <p class="dso-message">Maak een keuze.</p>

        <p class="dso-help-block" id="helpTextId_input-radio-invalid">de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel goedkoper</p>

    </div>

</fieldset>
<!-- Input Radio Valid -->
<fieldset class="form-group dso-radios dso-valid dso-required" aria-describedby="helpTextId_input-radio-valid">
    <legend class="dso-label-container">
        <span class="control-label">
            Kies soort auto
        </span>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-valid-0" name="input-radio-valid" value="1" checked>
            <label for="input-radio-valid-0">
                benzine
            </label>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-valid-1" name="input-radio-valid" value="2">
            <label for="input-radio-valid-1">
                diesel
            </label>

        </div>

        <p class="dso-help-block" id="helpTextId_input-radio-valid">de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel goedkoper</p>

    </div>

</fieldset>
<!-- Input Radio Disabled -->
<fieldset class="form-group dso-radios dso-valid dso-required" aria-describedby="helpTextId_input-radio-disabled">
    <legend class="dso-label-container">
        <span class="control-label">
            Kies soort auto
        </span>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-disabled-0" name="input-radio-disabled" value="1" disabled>
            <label for="input-radio-disabled-0">
                benzine
            </label>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled checked>
            <label for="input-radio-disabled-1">
                diesel
            </label>

        </div>

        <p class="dso-help-block" id="helpTextId_input-radio-disabled">de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel goedkoper</p>

    </div>

</fieldset>
<!-- Input Radio Inline -->
<fieldset class="form-group dso-radios dso-invalid dso-inline dso-required">
    <legend class="dso-label-container">
        <span class="control-label">
            Gaat het om de bouw van één of meer woningen?
        </span>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1">
            <label for="input-radio-inline-0">
                ja
            </label>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-inline-1" name="input-radio-inline" value="2">
            <label for="input-radio-inline-1">
                nee
            </label>

        </div>

        <p class="dso-message">Maak een keuze.</p>

    </div>

</fieldset>
<!-- Input Radio Inline Info -->
<fieldset class="form-group dso-radios dso-required" aria-describedby="helpTextId_input-radio-inline-info">
    <legend class="dso-label-container">
        <span class="control-label">
            Gaat het om de bouw van één of meer woningen?
        </span>

        <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
            <span class="sr-only">Toelichting bij vraag</span>
        </button>

        <div class="dso-info">
            <button type="button">
                <span class="sr-only">Sluiten</span>
            </button>
            <div class="dso-rich-content">
                <h4>Toelichting bij vraag: "Gaat het om de bouw van één of meer woningen?" </h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                </p>

            </div>
        </div>

    </legend>
    <div class="dso-field-container">

        <div class="dso-selectable">
            <input type="radio" id="input-radio-inline-info-0" name="input-radio-inline-info" value="1" checked>
            <label for="input-radio-inline-info-0">
                ja
            </label>

            <button type="button" class="btn dso-info-button dso-open" aria-expanded="true">
                <span class="sr-only">Toelichting bij antwoord</span>
            </button>

            <div class="dso-info">
                <button type="button">
                    <span class="sr-only">Sluiten</span>
                </button>
                <div class="dso-rich-content">
                    <h4>Toelichting bij antwoord: "ja"</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                        Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                        Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
                    </p>

                </div>
            </div>

        </div>

        <div class="dso-selectable">
            <input type="radio" id="input-radio-inline-info-1" name="input-radio-inline-info" value="2">
            <label for="input-radio-inline-info-1">
                nee
            </label>

            <button type="button" class="btn dso-info-button" aria-expanded="">
                <span class="sr-only">Toelichting bij antwoord</span>
            </button>

        </div>

        <p class="dso-help-block" id="helpTextId_input-radio-inline-info">Antwoord hier met &quot;Ja&quot; of &quot;Nee&quot;</p>

    </div>

    <div class="dso-info">
        <button type="button">
            <span class="sr-only">Sluiten</span>
        </button>
        <div class="dso-rich-content">
            <h4>Toelichting bij vraag: "Gaat het om de bouw van één of meer woningen?" - BINNENKORT DEPRECATED</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
                Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
                Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
            </p>

        </div>
    </div>

</fieldset>
{% set localId = generateLocalId(prefix, id) %}

<fieldset {{ className('form-group', 'dso-radios', [state, 'dso-' + state], [inline, 'dso-inline'], [required, 'dso-required']) }}{% if helpText %} aria-describedby="helpTextId_{{ id }}"{% endif%}>
  <legend class="dso-label-container">
    <span class="control-label">
      {{ label }}
    </span>
    {% if infoText %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText} %}
    {% endif %}
  </legend>
  <div class="dso-field-container">
    {% for option in options %}
      <div class="dso-selectable">
        <input type="radio" id="{{ localId }}-{{ loop.index0 }}" name="{{ id }}" value="{{ option.value }}"
          {% if option.disabled %} disabled{% endif %}
          {% if option.checked %} checked{% endif %}
          {% if option.required %} required{% endif %}>
        <label for="{{ localId }}-{{ loop.index0 }}">
          {{ option.label }}
        </label>
        {% if option.infoText %}
          {% render '@info-button', {infoOpen: option.infoOpen, infoButtonLabel: option.infoButtonLabel} %}
        {% endif %}
        {% if option.infoOpen %}
          {% render '@info', {infoText: option.infoText} %}
        {% endif %}
      </div>
    {% endfor %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: localId} %}
    {% endif %}
  </div>
  {% if infoOpen %}
    {% render '@info', {infoText: infoTextDeprecated} %}
  {% endif %}
</fieldset>
/* Default */
__title: default
id: input-radio
label: Kies soort auto
helpText: >-
  de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel
  goedkoper
options:
  - value: 1
    label: benzine
    checked: true
  - value: 2
    label: diesel
/* Input Radio Required */
__title: Verplicht
id: input-radio-required
label: Kies soort auto
helpText: >-
  de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel
  goedkoper
options:
  - value: 1
    label: benzine
    checked: true
  - value: 2
    label: diesel
__explanation:
  - >-
    Een verplichte keuze wordt in de markup aangegeven met
    <code>.dso-required</code> op de <code>.form-group.dso-radios</code>
  - >-
    Radiobuttons hebben (net zoals checkboxen) een
    <code>fieldset.form-group</code> als root element, geen
    <code>div.form-group</code>
required: true
/* Input Radio Invalid */
__title: Ongeldig
id: input-radio-invalid
label: Kies soort auto
helpText: >-
  de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel
  goedkoper
options:
  - value: 1
    label: benzine
  - value: 2
    label: diesel
__explanation:
  - >-
    Indien een radio groep ongeldig is, dient er een <code>.dso-invalid</code>
    class gezet te worden op de div met de class <code>.dso-radios</code>.
required: true
state: invalid
errorText: Maak een keuze.
/* Input Radio Valid */
__title: Geldig
id: input-radio-valid
label: Kies soort auto
helpText: >-
  de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel
  goedkoper
options:
  - value: 1
    label: benzine
    checked: true
  - value: 2
    label: diesel
__explanation:
  - >-
    Indien een radio groep ongeldig was en valide wordt gemaakt, dient de
    <code>.dso-invalid</code> class vervangen te worden door de class
    <code>.dso-valid</code>.
required: true
state: valid
/* Input Radio Disabled */
__title: Disabled
id: input-radio-disabled
label: Kies soort auto
helpText: >-
  de meeste mensen kiezen benzine maar vanaf 50000 km per jaar is diesel
  goedkoper
options:
  - value: 1
    label: benzine
    disabled: true
  - value: 2
    label: diesel
    checked: true
    disabled: true
required: true
state: valid
/* Input Radio Inline */
__title: Inline
id: input-radio-inline
label: Gaat het om de bouw van één of meer woningen?
helpText: ''
options:
  - value: 1
    label: ja
  - value: 2
    label: nee
__explanation:
  - >-
    Een keuze selectie tussen <code>ja</code> en <code>nee</code> vraagt om een
    inline variant. Dit is te bereiken door <code>.dso-inline</code> op
    <code>.dso-radios</code> te zetten.
required: true
inline: true
state: invalid
errorText: Maak een keuze.
/* Input Radio Inline Info */
__title: Infobutton
id: input-radio-inline-info
label: Gaat het om de bouw van één of meer woningen?
helpText: Antwoord hier met "Ja" of "Nee"
options:
  - value: 1
    label: ja
    checked: true
    infoOpen: true
    infoButtonLabel: Toelichting bij antwoord
    infoText: |
      <h4>Toelichting bij antwoord: "ja"</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
        Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
        Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
      </p>
  - value: 2
    label: nee
    infoButtonLabel: Toelichting bij antwoord
    infoText: |
      Closed
__explanation:
  - >-
    Een radio fieldset kan op twee plekken een info button krijgen. Naast de de
    vraag en per optie. Als een toelichting is opengeklapt moet er
    <code>.dso-open</code> op de toelichting button geplaatst worden.
required: true
infoOpen: true
infoButtonLabel: Toelichting bij vraag
infoText: >
  <h4>Toelichting bij vraag: "Gaat het om de bouw van één of meer woningen?"
  </h4>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>
infoTextDeprecated: >
  <h4>Toelichting bij vraag: "Gaat het om de bouw van één of meer woningen?" -
  BINNENKORT DEPRECATED</h4>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
    Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
    Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.
  </p>