Radios

Component preview opent in nieuw tabblad

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="sr-only">Radios - Default</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Default
        </span>

    </div>
    <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="sr-only">Radios - Required</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Required
        </span>

    </div>
    <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="errorTextId_input-radio-invalid helpTextId_input-radio-invalid">
    <legend class="sr-only">Radios - Invalid</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Invalid
        </span>

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

        <div class="dso-selectable">
            <input type="radio" id="input-radio-invalid-0" name="input-radio-invalid" value="1" aria-invalid="true">
            <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" aria-invalid="true">
            <label for="input-radio-invalid-1">
                diesel
            </label>

        </div>

        <p class="dso-message" id="errorTextId_input-radio-invalid">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="sr-only">Radios - Valid</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Valid
        </span>

    </div>
    <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="sr-only">Radios - Disabled</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Disabled
        </span>

    </div>
    <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" aria-describedby="errorTextId_input-radio-inline">
    <legend class="sr-only">Radios - Inline - Invalid</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Inline - Invalid
        </span>

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

        <div class="dso-selectable">
            <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" aria-invalid="true">
            <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" aria-invalid="true">
            <label for="input-radio-inline-1">
                nee
            </label>

        </div>

        <p class="dso-message" id="errorTextId_input-radio-inline">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="sr-only">Radios - Inline</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Inline
        </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>

    </div>
    <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="false">
                <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>
</fieldset>
<!-- Input Radio Static Info -->
<fieldset class="form-group dso-radios dso-required" aria-describedby="helpTextId_input-radio-static-info infoTextId_input-radio-static-info">
    <legend class="sr-only">Radios - Inline</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Inline
        </span>

        <div class="dso-info" id="infoTextId_input-radio-static-info">

            <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>

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

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

            <div class="dso-info" id="infoTextId_input-radio-static-info-0">

                <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-static-info-1" name="input-radio-static-info" value="2">
            <label for="input-radio-static-info-1">
                nee
            </label>

        </div>

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

    </div>
</fieldset>
<!-- Input Radio Allmessages -->
<fieldset class="form-group dso-radios dso-invalid dso-required" aria-describedby="errorTextId_input-radio-allmessages helpTextId_input-radio-allmessages infoTextId_input-radio-allmessages">
    <legend class="sr-only">Radios - Alle meldingen</legend>
    <div class="dso-label-container">
        <span class="control-label" aria-hidden="true">
            Radios - Alle meldingen
        </span>

        <div class="dso-info" id="infoTextId_input-radio-allmessages">

            <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>

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

        <div class="dso-selectable">
            <input type="radio" id="input-radio-allmessages-0" name="input-radio-allmessages" value="1" aria-invalid="true" checked>
            <label for="input-radio-allmessages-0">
                ja
            </label>

        </div>

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

        </div>

        <p class="dso-message" id="errorTextId_input-radio-allmessages">Maak een keuze.</p>

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

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

{% set errorTextId = 'errorTextId_' + localId %}
{% set helpTextId = 'helpTextId_' + localId %}
{% set infoTextId = 'infoTextId_' + localId %}

{% if errorText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + errorTextId %}
{% endif %}
{% if helpText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + helpTextId %}
{% endif %}
{% if infoText and static %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + infoTextId %}
{% endif %}

<fieldset
  {{ className('form-group', 'dso-radios', [state, 'dso-' + state], [inline, 'dso-inline'], [required, 'dso-required']) }}
  {{ attributes([ariaDescribedBy, 'aria-describedby', ariaDescribedBy]) }}
>
  <legend class="sr-only">{{ label }}</legend>
  <div class="dso-label-container">
    <span class="control-label" aria-hidden="true">
      {{ label }}
    </span>
    {% if infoText and not static %}
      {% render '@info-button', {infoOpen: infoOpen, infoButtonLabel: infoButtonLabel} %}
    {% endif %}
    {% if infoOpen %}
      {% render '@info', {infoText: infoText, static: static, id: infoTextId} %}
    {% endif %}
  </div>
  <div class="dso-field-container">
    {% for option in options %}
      {% render '@selectable', {
        type: 'radio',
        id: localId + '-' + loop.index0,
        name: id,
        value: option.value,
        label: option.label,
        disabled: option.disabled,
        checked: option.checked,
        required: option.required,
        invalid: state == 'invalid',
        infoText: option.infoText,
        infoOpen: option.infoOpen,
        infoButtonLabel: option.infoButtonLabel,
        infoStatic: option.static
      } %}
    {% endfor %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText, id: errorTextId} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: helpTextId} %}
    {% endif %}
  </div>
</fieldset>
/* Default */
__title: default
id: input-radio
label: Radios - Default
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: required
id: input-radio-required
label: Radios - Required
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: invalid
id: input-radio-invalid
label: Radios - Invalid
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: valid
id: input-radio-valid
label: Radios - Valid
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: Radios - Disabled
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: Radios - Inline - Invalid
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: Toelichting uitgeklapt
id: input-radio-inline-info
label: Radios - Inline
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
    infoOpen: false
    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>
/* Input Radio Static Info */
__title: Vaste toelichting
id: input-radio-static-info
label: Radios - Inline
helpText: Antwoord hier met "Ja" of "Nee"
options:
  - value: 1
    label: ja
    checked: true
    infoOpen: true
    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>
    static: true
  - value: 2
    label: nee
__explanation:
  - >-
    Een radio fieldset kan ook een vaste toelichting 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
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>
static: true
/* Input Radio Allmessages */
__title: Alle meldingen
id: input-radio-allmessages
label: Radios - Alle meldingen
helpText: Antwoord hier met "Ja" of "Nee"
options:
  - value: 1
    label: ja
    checked: true
  - value: 2
    label: nee
__explanation: >-
  Naar de meldingen wordt verwezen met een <code>aria-describedby</code>
  attribuut vanuit de <code>fieldset</code>.
required: true
state: invalid
errorText: Maak een keuze.
infoOpen: true
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>
static: true