DSO Component Library

Vertical Group Checkboxes 

<fieldset class="form-group radios">
    <legend class="control-label">Getal</legend>
    <div class="radio">
        <label>
        <input type="radio" name="checkbox_voorbeeld" value="1" /> een
      </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="checkbox_voorbeeld" value="2" /> twee
      </label>
    </div>
    <div class="radio">
        <label>
        <input type="radio" name="checkbox_voorbeeld" value="3" /> drie
      </label>
    </div>
    <p class="help-block" id="helpTextId_checkbox_voorbeeld">Kies een even getal</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: checkbox_voorbeeld
label: Getal
helpText: Kies een even getal
options:
  - value: 1
    label: een
  - value: 2
    label: twee
  - value: 3
    label: drie

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

Als de checkbox een disabled state heeft, dan moet er 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="checkbox_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">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="checkbox_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">Getal</legend> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_checkbox_voorbeeld">Kies een even getal</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">Getal</legend> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_checkbox_voorbeeld">Kies een even getal</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">Getal</legend> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_checkbox_voorbeeld">Kies een even getal</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">Getal</legend> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="1"> een </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="2"> twee </label> </div> <div class="radio"> <label> <input type="radio" name="checkbox_voorbeeld" value="3"> drie </label> </div> <p class="help-block" id="helpTextId_checkbox_voorbeeld">Kies een even getal</p> </fieldset> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>