DSO Component Library

Group Radios: 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>
    {{#if infoText }}
      {{> '@form-field-info-button' }}
    {{/if}}
  </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>
        {{#if infoText }}
          {{> '@form-field-info-button' }}
        {{/if}}
        {{#if infoOpen }}
          {{> '@form-field-info' }}
        {{/if}}
      </div>
    {{/each}}
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
  {{#if infoOpen }}
    {{> '@form-field-info' }}
  {{/if}}
</fieldset>
 
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

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

ERROR: WCAG2AA.Principle4.Guideline4_1.4_1_1.F77

Duplicate id attribute value "input-radio-inline-0" found on the web page.

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

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H71.SameName

If these radio buttons or check boxes require a further group-level description, they should be contained within a fieldset element.

<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> <!-- Start: @group-radios--input-radio-inline-info --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </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> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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-1" name="input-radio-inline" value="2"> <label for="input-radio-inline-1"> nee </label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <p class="dso-help-block" id="helpTextId_input-radio-inline">Antwoord hier met "Ja" of "Nee"</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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> </div> </div> <!-- End: @group-radios--input-radio-inline-info --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h4 element appears to be the primary document heading, so should be an h1 element.

<h4>Heading 4</h4>

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> <!-- Start: @group-radios--input-radio-inline-info --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </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> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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-1" name="input-radio-inline" value="2"> <label for="input-radio-inline-1"> nee </label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <p class="dso-help-block" id="helpTextId_input-radio-inline">Antwoord hier met "Ja" of "Nee"</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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> </div> </div> <!-- End: @group-radios--input-radio-inline-info --><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> <!-- Start: @group-radios--input-radio-inline-info --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </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> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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-1" name="input-radio-inline" value="2"> <label for="input-radio-inline-1"> nee </label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <p class="dso-help-block" id="helpTextId_input-radio-inline">Antwoord hier met "Ja" of "Nee"</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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> </div> </div> <!-- End: @group-radios--input-radio-inline-info --><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> <!-- Start: @group-radios--input-radio-inline-info --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </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> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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-1" name="input-radio-inline" value="2"> <label for="input-radio-inline-1"> nee </label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <p class="dso-help-block" id="helpTextId_input-radio-inline">Antwoord hier met "Ja" of "Nee"</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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> </div> </div> <!-- End: @group-radios--input-radio-inline-info --><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> <!-- Start: @group-radios--input-radio-inline-info --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Infobutton</h2> <p>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.</p> </div> <div class="dso-example"> <fieldset class="form-group dso-radios dso-required"> <legend class="dso-label-container"> <label class="control-label"> Gaat het om de bouw van één of meer woningen? </label> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> </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> <button type="button" class="btn dso-field-info-button dso-open"> <span class="sr-only"> Toelichting </span> </button> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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-1" name="input-radio-inline" value="2"> <label for="input-radio-inline-1"> nee </label> <button type="button" class="btn dso-field-info-button"> <span class="sr-only"> Toelichting </span> </button> </div> <p class="dso-help-block" id="helpTextId_input-radio-inline">Antwoord hier met "Ja" of "Nee"</p> </div> <div class="dso-field-info"> <button type="button"> <span class="sr-only">Sluiten</span> </button> <div class="dso-rich-content"> <h4>Heading 4</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> </div> </div> <!-- End: @group-radios--input-radio-inline-info --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>