DSO Component Library

Vertical Group Radios 

<fieldset class="form-group radios">
    <legend class="control-label">Oneven getal</legend>
    <div class="radio">
        <label>
        <input type="radio" name="radio_voorbeeld" value="1" /> een
      </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="radio_voorbeeld" value="2" /> twee
      </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="radio_voorbeeld" value="3" /> drie
      </label>
    </div>
    <p class="help-block" id="helpTextId_radio_voorbeeld">Kies alle oneven getallen</p>
</fieldset>
 
<fieldset class="form-group radios">
  <legend class="control-label">{{ label }}</legend>
  {{#each options }}
    <div class="radio">
      <label>
        <input type="radio" name="{{ ../id }}" value="{{ value }}"{{{ifattr ' disabled' disabled }}}{{{ifattr ' readonly' readonly }}}{{{ifattr ' checked' checked }}} /> {{ label }}
      </label>
    </div>
  {{/each}}
  {{#if helpText }}
    {{> '@help-block' }}
  {{/if}}
</fieldset>
 
id: radio_voorbeeld
label: Oneven getal
helpText: Kies alle oneven getallen
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie

Een help block staat altijd direct in de .form-group.

Als een checkbox disabled is, dan moet er ook een .disabled op de .radio worden geplaatst. Zonder deze modifier zal er geen “niet toegestaan” cursor op het label zijn

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H44.NonExistentFragment

This label's "for" attribute contains an ID that does not exist in the document fragment.

<label> <input type="radio" name="radio_voorbeeld" value="1"> een </label>

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.

<legend class="control-label">Oneven getal</legend>

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

Check that the title element describes the document.

<title>Default

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" name="radio_voorbeeld" 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> <fieldset class="form-group radios"> <legend class="control-label">Oneven getal</legend> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_radio_voorbeeld">Kies alle oneven getallen</p> </fieldset> <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> <fieldset class="form-group radios"> <legend class="control-label">Oneven getal</legend> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_radio_voorbeeld">Kies alle oneven getallen</p> </fieldset> <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> <fieldset class="form-group radios"> <legend class="control-label">Oneven getal</legend> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_radio_voorbeeld">Kies alle oneven getallen</p> </fieldset> <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> <fieldset class="form-group radios"> <legend class="control-label">Oneven getal</legend> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="radio_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_radio_voorbeeld">Kies alle oneven getallen</p> </fieldset> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>