DSO Component Library

Group Confirm: Input Confirm Invalid 

<div class="form-group dso-confirm dso-invalid dso-required">
    <div class="dso-field-container">
        <div class="dso-selectable">
            <input type="checkbox" id="input-confirm-invalid" name="" value="" required />
            <label for="input-confirm-invalid">
                Ik ga akkoord met de voorwaarden
            </label>
        </div>
        <p class="dso-message">Dit veld is verplicht</p>
    </div>
</div>
 
<div class="form-group dso-confirm{{#if state}} dso-{{ state }}{{/if}}{{#if required }} dso-required{{/if}}">
  <div class="dso-field-container">
    <div class="dso-selectable">
      <input type="checkbox" id="{{ id }}" name="{{ ../id }}" value="{{ value }}"
        {{{ifattr 'disabled' disabled }}}
        {{{ifattr 'checked' checked }}}
        {{{ifattr 'required' required }}} />
      <label for="{{ id }}">
        {{ label }}
      </label>
    </div>
    {{#if errorText }}
      {{> '@error-block' }}
    {{/if}}
    {{#if helpText }}
      {{> '@help-block' }}
    {{/if}}
  </div>
</div>
 
id: input-confirm-invalid
label: Ik ga akkoord met de voorwaarden
__title: Ongeldig
__explanation:
  - >-
    Indien een confirm ongeldig is, dient er een <code>.dso-invalid</code> class
    gezet te worden op de div met de class <code>.dso-checkboxes</code>.
required: true
state: invalid
errorText: Dit veld is verplicht

There are no notes for this item.

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-confirm--default --> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm" name="" value=""> <label for="input-confirm"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> <!-- End: @group-confirm--default --><hr> <!-- Start: @group-confirm--input-confirm-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-confirm</code></p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-required" name="" value="" required=""> <label for="input-confirm-required"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-required --><hr> <!-- Start: @group-confirm--input-confirm-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een confirm ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-checkboxes</code>.</p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-invalid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-invalid" name="" value="" required=""> <label for="input-confirm-invalid"> Ik ga akkoord met de voorwaarden </label> </div> <p class="dso-message">Dit veld is verplicht</p> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-invalid --><hr> <!-- Start: @group-confirm--input-confirm-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een confirm 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"> <div class="form-group dso-confirm dso-valid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-valid" name="" value="" checked="" required=""> <label for="input-confirm-valid"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-valid --><hr> <!-- Start: @group-confirm--input-confirm-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-disabled" name="" value="" disabled="" checked="" required=""> <label for="input-confirm-disabled"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-disabled --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>

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 for="input-confirm"> Ik ga akkoord met de voorwaarden </label>

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

Check that the title element describes the document.

<title>Group Confirm

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="checkbox" id="input-confirm" name="" value="">

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-confirm--default --> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm" name="" value=""> <label for="input-confirm"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> <!-- End: @group-confirm--default --><hr> <!-- Start: @group-confirm--input-confirm-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-confirm</code></p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-required" name="" value="" required=""> <label for="input-confirm-required"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-required --><hr> <!-- Start: @group-confirm--input-confirm-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een confirm ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-checkboxes</code>.</p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-invalid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-invalid" name="" value="" required=""> <label for="input-confirm-invalid"> Ik ga akkoord met de voorwaarden </label> </div> <p class="dso-message">Dit veld is verplicht</p> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-invalid --><hr> <!-- Start: @group-confirm--input-confirm-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een confirm 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"> <div class="form-group dso-confirm dso-valid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-valid" name="" value="" checked="" required=""> <label for="input-confirm-valid"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-valid --><hr> <!-- Start: @group-confirm--input-confirm-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-disabled" name="" value="" disabled="" checked="" required=""> <label for="input-confirm-disabled"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-disabled --><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-confirm--default --> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm" name="" value=""> <label for="input-confirm"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> <!-- End: @group-confirm--default --><hr> <!-- Start: @group-confirm--input-confirm-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-confirm</code></p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-required" name="" value="" required=""> <label for="input-confirm-required"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-required --><hr> <!-- Start: @group-confirm--input-confirm-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een confirm ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-checkboxes</code>.</p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-invalid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-invalid" name="" value="" required=""> <label for="input-confirm-invalid"> Ik ga akkoord met de voorwaarden </label> </div> <p class="dso-message">Dit veld is verplicht</p> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-invalid --><hr> <!-- Start: @group-confirm--input-confirm-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een confirm 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"> <div class="form-group dso-confirm dso-valid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-valid" name="" value="" checked="" required=""> <label for="input-confirm-valid"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-valid --><hr> <!-- Start: @group-confirm--input-confirm-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-disabled" name="" value="" disabled="" checked="" required=""> <label for="input-confirm-disabled"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-disabled --><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-confirm--default --> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm" name="" value=""> <label for="input-confirm"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> <!-- End: @group-confirm--default --><hr> <!-- Start: @group-confirm--input-confirm-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-confirm</code></p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-required" name="" value="" required=""> <label for="input-confirm-required"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-required --><hr> <!-- Start: @group-confirm--input-confirm-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een confirm ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-checkboxes</code>.</p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-invalid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-invalid" name="" value="" required=""> <label for="input-confirm-invalid"> Ik ga akkoord met de voorwaarden </label> </div> <p class="dso-message">Dit veld is verplicht</p> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-invalid --><hr> <!-- Start: @group-confirm--input-confirm-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een confirm 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"> <div class="form-group dso-confirm dso-valid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-valid" name="" value="" checked="" required=""> <label for="input-confirm-valid"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-valid --><hr> <!-- Start: @group-confirm--input-confirm-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-disabled" name="" value="" disabled="" checked="" required=""> <label for="input-confirm-disabled"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-disabled --><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-confirm--default --> <div class="form-group dso-confirm"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm" name="" value=""> <label for="input-confirm"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> <!-- End: @group-confirm--default --><hr> <!-- Start: @group-confirm--input-confirm-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-confirm</code></p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-required" name="" value="" required=""> <label for="input-confirm-required"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-required --><hr> <!-- Start: @group-confirm--input-confirm-invalid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Ongeldig</h2> <p>Indien een confirm ongeldig is, dient er een <code>.dso-invalid</code> class gezet te worden op de div met de class <code>.dso-checkboxes</code>.</p> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-invalid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-invalid" name="" value="" required=""> <label for="input-confirm-invalid"> Ik ga akkoord met de voorwaarden </label> </div> <p class="dso-message">Dit veld is verplicht</p> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-invalid --><hr> <!-- Start: @group-confirm--input-confirm-valid --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Geldig</h2> <p>Indien een confirm 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"> <div class="form-group dso-confirm dso-valid dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-valid" name="" value="" checked="" required=""> <label for="input-confirm-valid"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-valid --><hr> <!-- Start: @group-confirm--input-confirm-disabled --> <div class="dso-example-wrapper"> <div class="dso-example-text" aria-hidden="true"> <h2>Disabled</h2> </div> <div class="dso-example"> <div class="form-group dso-confirm dso-required"> <div class="dso-field-container"> <div class="dso-selectable"> <input type="checkbox" id="input-confirm-disabled" name="" value="" disabled="" checked="" required=""> <label for="input-confirm-disabled"> Ik ga akkoord met de voorwaarden </label> </div> </div> </div> </div> </div> <!-- End: @group-confirm--input-confirm-disabled --><hr> <button type="submit" class="hidden">VALIDATOR_ONLY</button> </form>