DSO Component Library

# Group Radios

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <!-- Default -->
    <fieldset class="form-group dso-radios">
        <legend class="dso-label-container">
            <label class="control-label">
          Maak een keuze
        </label>
        </legend>
        <div class="dso-field-container">
            <div class="dso-selectable">
                <input type="radio" id="input-radio-0" name="input-radio" value="1" />
                <label for="input-radio-0">
              een
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-1" name="input-radio" value="2" />
                <label for="input-radio-1">
              twee
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-2" name="input-radio" value="3" />
                <label for="input-radio-2">
              drie
            </label>
            </div>
            <p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p>
        </div>
    </fieldset>

    <!-- Input Radio Required -->
    <fieldset class="form-group dso-radios dso-required">
        <legend class="dso-label-container">
            <label class="control-label">
          Maak een keuze
        </label>
        </legend>
        <div class="dso-field-container">
            <div class="dso-selectable">
                <input type="radio" id="input-radio-required-0" name="input-radio-required" value="1" />
                <label for="input-radio-required-0">
              een
            </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">
              twee
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-required-2" name="input-radio-required" value="3" />
                <label for="input-radio-required-2">
              drie
            </label>
            </div>
            <p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p>
        </div>
    </fieldset>

    <!-- Input Radio Invalid -->
    <fieldset class="form-group dso-radios dso-invalid dso-required">
        <legend class="dso-label-container">
            <label class="control-label">
          Maak een keuze
        </label>
        </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">
              een
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked />
                <label for="input-radio-invalid-1">
              twee
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3" />
                <label for="input-radio-invalid-2">
              drie
            </label>
            </div>
            <p class="dso-message">Foutieve keuze</p>
            <p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p>
        </div>
    </fieldset>

    <!-- Input Radio Valid -->
    <fieldset class="form-group dso-radios dso-valid dso-required">
        <legend class="dso-label-container">
            <label class="control-label">
          Maak een keuze
        </label>
        </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">
              een
            </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">
              twee
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3" />
                <label for="input-radio-valid-2">
              drie
            </label>
            </div>
            <p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p>
        </div>
    </fieldset>

    <!-- Input Radio Disabled -->
    <fieldset class="form-group dso-radios dso-valid dso-required">
        <legend class="dso-label-container">
            <label class="control-label">
          Maak een keuze
        </label>
        </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">
              een
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled />
                <label for="input-radio-disabled-1">
              twee
            </label>
            </div>
            <div class="dso-selectable">
                <input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled checked />
                <label for="input-radio-disabled-2">
              drie
            </label>
            </div>
            <p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p>
        </div>
    </fieldset>

    <!-- Input Radio Inline -->
    <fieldset class="form-group dso-radios dso-inline dso-required">
        <legend class="dso-label-container">
            <label class="control-label">
          Gaat het om de bouw van één of meer woningen?
        </label>
        </legend>
        <div class="dso-field-container">
            <div class="dso-selectable">
                <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked />
                <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>
        </div>
    </fieldset>

`
`

    <fieldset class="form-group dso-radios{{#if state}} dso-{{ state }}{{/if}}{{#if inline}} dso-inline{{/if}}{{#if required }} dso-required{{/if}}">
      <legend class="dso-label-container">
        <label class="control-label">
          {{ label }}
        </label>
      </legend>
      <div class="dso-field-container">
        {{#each options }}
          <div class="dso-selectable">
            <input type="radio" id="{{ ../id }}-{{ @index }}" name="{{ ../id }}" value="{{ value }}"
              {{{ifattr 'disabled' disabled }}}
              {{{ifattr 'checked' checked }}}
              {{{ifattr 'required' required }}} />
            <label for="{{ ../id }}-{{ @index }}">
              {{ label }}
            </label>
          </div>
        {{/each}}
        {{#if errorText }}
          {{> '@error-block' }}
        {{/if}}
        {{#if helpText }}
          {{> '@help-block' }}
        {{/if}}
      </div>
    </fieldset>

`
`

    /* Default */
    id: input-radio
    label: Maak een keuze
    helpText: Kies een oneven getal
    options:
      - value: 1
        label: een
      - value: 2
        label: twee
      - value: 3
        label: drie

    /* Input Radio Required */
    id: input-radio-required
    label: Maak een keuze
    helpText: Kies een oneven getal
    options:
      - value: 1
        label: een
      - value: 2
        label: twee
      - value: 3
        label: drie
    __title: Verplicht
    __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 */
    id: input-radio-invalid
    label: Maak een keuze
    helpText: Kies een oneven getal
    options:
      - value: 1
        label: een
      - value: 2
        label: twee
        checked: true
      - value: 3
        label: drie
    __title: Ongeldig
    __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: Foutieve keuze

    /* Input Radio Valid */
    id: input-radio-valid
    label: Maak een keuze
    helpText: Kies een oneven getal
    options:
      - value: 1
        label: een
        checked: true
      - value: 2
        label: twee
      - value: 3
        label: drie
    __title: Geldig
    __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 */
    id: input-radio-disabled
    label: Maak een keuze
    helpText: Kies een oneven getal
    options:
      - value: 1
        label: een
        disabled: true
      - value: 2
        label: twee
        disabled: true
      - value: 3
        label: drie
        checked: true
        disabled: true
    __title: Disabled
    required: true
    state: valid

    /* Input Radio Inline */
    id: input-radio-inline
    label: Gaat het om de bouw van één of meer woningen?
    helpText: null
    options:
      - value: 1
        label: ja
        checked: true
      - value: 2
        label: nee
    __title: Inline
    __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

`

- Handle: @group-radios
- Variants (6): Default , Input Radio Required , Input Radio Invalid , Input Radio Valid , Input Radio Disabled , Input Radio Inline
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\01-groups\group-radios.hbs
- References (2): @error-block, @help-block

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

### WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

`<label class="control-label"> Maak een keuze </label>`

### NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

`<title>Group Radios`

### NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

`<input type="radio" id="input-radio-0" name="input-radio" value="1">`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

`<form class="form-horizontal"> <!-- Start: @group-radios--default --> <fieldset class="form-group dso-radios"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-0" name="input-radio" value="1"> <label for="input-radio-0"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-1" name="input-radio" value="2"> <label for="input-radio-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-2" name="input-radio" value="3"> <label for="input-radio-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p> </div> </fieldset> <!-- End: @group-radios--default --><hr> <!-- Start: @group-radios--input-radio-required --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Verplicht</h2> <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p> <p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-required-0" name="input-radio-required" value="1"> <label for="input-radio-required-0"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-required-2" name="input-radio-required" value="3"> <label for="input-radio-required-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-required --><hr> <!-- Start: @group-radios--input-radio-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-invalid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked=""> <label for="input-radio-invalid-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3"> <label for="input-radio-invalid-2"> drie </label> </div> <p class="dso-message">Foutieve keuze</p> <p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-invalid --><hr> <!-- Start: @group-radios--input-radio-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3"> <label for="input-radio-valid-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-valid --><hr> <!-- Start: @group-radios--input-radio-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled=""> <label for="input-radio-disabled-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked=""> <label for="input-radio-disabled-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-disabled --><hr> <!-- Start: @group-radios--input-radio-inline --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Inline</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-inline dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked=""> <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> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-inline --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

`<form class="form-horizontal"> <!-- Start: @group-radios--default --> <fieldset class="form-group dso-radios"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-0" name="input-radio" value="1"> <label for="input-radio-0"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-1" name="input-radio" value="2"> <label for="input-radio-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-2" name="input-radio" value="3"> <label for="input-radio-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p> </div> </fieldset> <!-- End: @group-radios--default --><hr> <!-- Start: @group-radios--input-radio-required --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Verplicht</h2> <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p> <p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-required-0" name="input-radio-required" value="1"> <label for="input-radio-required-0"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-required-2" name="input-radio-required" value="3"> <label for="input-radio-required-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-required --><hr> <!-- Start: @group-radios--input-radio-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-invalid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked=""> <label for="input-radio-invalid-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3"> <label for="input-radio-invalid-2"> drie </label> </div> <p class="dso-message">Foutieve keuze</p> <p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-invalid --><hr> <!-- Start: @group-radios--input-radio-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3"> <label for="input-radio-valid-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-valid --><hr> <!-- Start: @group-radios--input-radio-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled=""> <label for="input-radio-disabled-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked=""> <label for="input-radio-disabled-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-disabled --><hr> <!-- Start: @group-radios--input-radio-inline --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Inline</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-inline dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked=""> <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> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-inline --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

`<form class="form-horizontal"> <!-- Start: @group-radios--default --> <fieldset class="form-group dso-radios"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-0" name="input-radio" value="1"> <label for="input-radio-0"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-1" name="input-radio" value="2"> <label for="input-radio-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-2" name="input-radio" value="3"> <label for="input-radio-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p> </div> </fieldset> <!-- End: @group-radios--default --><hr> <!-- Start: @group-radios--input-radio-required --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Verplicht</h2> <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p> <p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-required-0" name="input-radio-required" value="1"> <label for="input-radio-required-0"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-required-2" name="input-radio-required" value="3"> <label for="input-radio-required-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-required --><hr> <!-- Start: @group-radios--input-radio-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-invalid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked=""> <label for="input-radio-invalid-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3"> <label for="input-radio-invalid-2"> drie </label> </div> <p class="dso-message">Foutieve keuze</p> <p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-invalid --><hr> <!-- Start: @group-radios--input-radio-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3"> <label for="input-radio-valid-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-valid --><hr> <!-- Start: @group-radios--input-radio-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled=""> <label for="input-radio-disabled-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked=""> <label for="input-radio-disabled-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-disabled --><hr> <!-- Start: @group-radios--input-radio-inline --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Inline</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-inline dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked=""> <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> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-inline --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`

### NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

`<form class="form-horizontal"> <!-- Start: @group-radios--default --> <fieldset class="form-group dso-radios"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-0" name="input-radio" value="1"> <label for="input-radio-0"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-1" name="input-radio" value="2"> <label for="input-radio-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-2" name="input-radio" value="3"> <label for="input-radio-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio">Kies een oneven getal</p> </div> </fieldset> <!-- End: @group-radios--default --><hr> <!-- Start: @group-radios--input-radio-required --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Verplicht</h2> <p>Een verplichte keuze wordt in de markup aangegeven met <code>.dso-required</code> op de <code>.form-group.dso-radios</code></p> <p>Radiobuttons hebben (net zoals checkboxen) een <code>fieldset.form-group</code> als root element, geen <code>div.form-group</code></p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-required-0" name="input-radio-required" value="1"> <label for="input-radio-required-0"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-required-2" name="input-radio-required" value="3"> <label for="input-radio-required-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-required">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-required --><hr> <!-- Start: @group-radios--input-radio-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-invalid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-1" name="input-radio-invalid" value="2" checked=""> <label for="input-radio-invalid-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-invalid-2" name="input-radio-invalid" value="3"> <label for="input-radio-invalid-2"> drie </label> </div> <p class="dso-message">Foutieve keuze</p> <p class="dso-help-block" id="helpTextId_input-radio-invalid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-invalid --><hr> <!-- Start: @group-radios--input-radio-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>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>.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </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"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-valid-2" name="input-radio-valid" value="3"> <label for="input-radio-valid-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-valid">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-valid --><hr> <!-- Start: @group-radios--input-radio-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-valid dso-required"> <legend class="dso-label-container"> <label class="control-label"> Maak een keuze </label> </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"> een </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-1" name="input-radio-disabled" value="2" disabled=""> <label for="input-radio-disabled-1"> twee </label> </div> <div class="dso-selectable"> <input type="radio" id="input-radio-disabled-2" name="input-radio-disabled" value="3" disabled="" checked=""> <label for="input-radio-disabled-2"> drie </label> </div> <p class="dso-help-block" id="helpTextId_input-radio-disabled">Kies een oneven getal</p> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-disabled --><hr> <!-- Start: @group-radios--input-radio-inline --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Inline</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-inline dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> </legend> <div class="dso-field-container"> <div class="dso-selectable"> <input type="radio" id="input-radio-inline-0" name="input-radio-inline" value="1" checked=""> <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> </div> </fieldset> </div> </div> <!-- End: @group-radios--input-radio-inline --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>`