<!-- Default -->
<fieldset class="form-group dso-checkboxes">
<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="checkbox" id="input-checkbox-0" name="input-checkbox" value="1" />
<label for="input-checkbox-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2" />
<label for="input-checkbox-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3" />
<label for="input-checkbox-2">drie</label>
</div>
</div>
</fieldset>
<!-- Input Checkbox Required -->
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1" />
<label for="input-checkbox-required-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2" />
<label for="input-checkbox-required-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3" />
<label for="input-checkbox-required-2">drie</label>
</div>
</div>
</fieldset>
<!-- Input Checkbox Invalid -->
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked />
<label for="input-checkbox-invalid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2" />
<label for="input-checkbox-invalid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3" />
<label for="input-checkbox-invalid-2">drie</label>
</div>
<p class="dso-message">Selecteer minimaal 2 velden</p>
</div>
</fieldset>
<!-- Input Checkbox Valid -->
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1" />
<label for="input-checkbox-valid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked />
<label for="input-checkbox-valid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3" />
<label for="input-checkbox-valid-2">drie</label>
</div>
<p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
</div>
</fieldset>
<!-- Input Checkbox Disabled -->
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled checked />
<label for="input-checkbox-disabled-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled />
<label for="input-checkbox-disabled-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled />
<label for="input-checkbox-disabled-2">drie</label>
</div>
</div>
</fieldset>
<fieldset class="form-group dso-checkboxes{{#if state}} dso-{{ state }}{{/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="checkbox" 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-checkbox
label: Maak een keuze
options:
- value: 1
label: een
id: checkbox_1
- value: 2
label: twee
id: checkbox_2
- value: 3
label: drie
id: checkbox_3
/* Input Checkbox Required */
id: input-checkbox-required
label: Maak een keuze
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-checkboxes</code>
- >-
Checkboxes hebben (net zoals radio's) een <code>fieldset.form-group</code>
als root element, geen <code>div.form-group</code>
required: true
/* Input Checkbox Invalid */
id: input-checkbox-invalid
label: Maak een keuze
options:
- value: 1
label: een
checked: true
- value: 2
label: twee
- value: 3
label: drie
__title: Ongeldig
__explanation: >-
Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op
de <code>.form-group.dso-checkboxes</code> geplaatst te worden
required: true
state: invalid
errorText: Selecteer minimaal 2 velden
/* Input Checkbox Valid */
id: input-checkbox-valid
label: Maak een keuze
options:
- value: 1
label: een
- value: 2
label: twee
checked: true
- value: 3
label: drie
__title: Geldig
__explanation: >-
Een ongeldige checkbox-group welke geldig is gemaakt, dient de
<code>.dso-invalid</code> class vervangen te worden door
<code>.dso-valid</code>
required: true
helpText: Selecteer alle even getallen
state: valid
/* Input Checkbox Disabled */
id: input-checkbox-disabled
label: Maak een keuze
options:
- value: 1
label: een
disabled: true
checked: true
- value: 2
label: twee
disabled: true
- value: 3
label: drie
disabled: true
__title: Disabled
__explanation: >-
Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code>
attribuut krijgen.
required: true
- Handle: @group-checkboxes
- Variants (5): Default , Input Checkbox Required , Input Checkbox Invalid , Input Checkbox Valid , Input Checkbox Disabled
- Preview:
- Filesystem Path: components\03-forms\01-groups\group-checkboxes.hbs
- References (2): @error-block, @help-block
Een checkbox 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 Checkboxes
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-checkbox-0" name="input-checkbox" 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-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
<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="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
<label for="input-checkbox-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
<label for="input-checkbox-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
<label for="input-checkbox-2">drie</label>
</div>
</div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>
<!-- Start: @group-checkboxes--input-checkbox-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-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) 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-checkboxes 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="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
<label for="input-checkbox-required-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
<label for="input-checkbox-required-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
<label for="input-checkbox-required-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>
<!-- Start: @group-checkboxes--input-checkbox-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
<label for="input-checkbox-invalid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
<label for="input-checkbox-invalid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
<label for="input-checkbox-invalid-2">drie</label>
</div>
<p class="dso-message">Selecteer minimaal 2 velden</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
<label for="input-checkbox-valid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
<label for="input-checkbox-valid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
<label for="input-checkbox-valid-2">drie</label>
</div>
<p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
<p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
<label for="input-checkbox-disabled-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
<label for="input-checkbox-disabled-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
<label for="input-checkbox-disabled-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-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-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
<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="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
<label for="input-checkbox-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
<label for="input-checkbox-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
<label for="input-checkbox-2">drie</label>
</div>
</div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>
<!-- Start: @group-checkboxes--input-checkbox-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-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) 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-checkboxes 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="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
<label for="input-checkbox-required-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
<label for="input-checkbox-required-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
<label for="input-checkbox-required-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>
<!-- Start: @group-checkboxes--input-checkbox-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
<label for="input-checkbox-invalid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
<label for="input-checkbox-invalid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
<label for="input-checkbox-invalid-2">drie</label>
</div>
<p class="dso-message">Selecteer minimaal 2 velden</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
<label for="input-checkbox-valid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
<label for="input-checkbox-valid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
<label for="input-checkbox-valid-2">drie</label>
</div>
<p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
<p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
<label for="input-checkbox-disabled-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
<label for="input-checkbox-disabled-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
<label for="input-checkbox-disabled-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-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-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
<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="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
<label for="input-checkbox-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
<label for="input-checkbox-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
<label for="input-checkbox-2">drie</label>
</div>
</div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>
<!-- Start: @group-checkboxes--input-checkbox-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-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) 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-checkboxes 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="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
<label for="input-checkbox-required-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
<label for="input-checkbox-required-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
<label for="input-checkbox-required-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>
<!-- Start: @group-checkboxes--input-checkbox-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
<label for="input-checkbox-invalid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
<label for="input-checkbox-invalid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
<label for="input-checkbox-invalid-2">drie</label>
</div>
<p class="dso-message">Selecteer minimaal 2 velden</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
<label for="input-checkbox-valid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
<label for="input-checkbox-valid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
<label for="input-checkbox-valid-2">drie</label>
</div>
<p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
<p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
<label for="input-checkbox-disabled-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
<label for="input-checkbox-disabled-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
<label for="input-checkbox-disabled-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-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-checkboxes--default -->
<fieldset class="form-group dso-checkboxes">
<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="checkbox" id="input-checkbox-0" name="input-checkbox" value="1">
<label for="input-checkbox-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-1" name="input-checkbox" value="2">
<label for="input-checkbox-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-2" name="input-checkbox" value="3">
<label for="input-checkbox-2">drie</label>
</div>
</div>
</fieldset>
<!-- End: @group-checkboxes--default --><hr>
<!-- Start: @group-checkboxes--input-checkbox-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-checkboxes</code></p>
<p>Checkboxes hebben (net zoals radio's) 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-checkboxes 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="checkbox" id="input-checkbox-required-0" name="input-checkbox-required" value="1">
<label for="input-checkbox-required-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-1" name="input-checkbox-required" value="2">
<label for="input-checkbox-required-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-required-2" name="input-checkbox-required" value="3">
<label for="input-checkbox-required-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-required --><hr>
<!-- Start: @group-checkboxes--input-checkbox-invalid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Ongeldig</h2>
<p>Indien een checkbox groep ongeldig is, dient er <code>.dso-invalid</code> op de <code>.form-group.dso-checkboxes</code> geplaatst te worden</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-invalid-0" name="input-checkbox-invalid" value="1" checked="">
<label for="input-checkbox-invalid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-1" name="input-checkbox-invalid" value="2">
<label for="input-checkbox-invalid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-invalid-2" name="input-checkbox-invalid" value="3">
<label for="input-checkbox-invalid-2">drie</label>
</div>
<p class="dso-message">Selecteer minimaal 2 velden</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-invalid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-valid -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Geldig</h2>
<p>Een ongeldige checkbox-group welke geldig is gemaakt, dient de <code>.dso-invalid</code> class vervangen te worden door <code>.dso-valid</code></p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-valid-0" name="input-checkbox-valid" value="1">
<label for="input-checkbox-valid-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-1" name="input-checkbox-valid" value="2" checked="">
<label for="input-checkbox-valid-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-valid-2" name="input-checkbox-valid" value="3">
<label for="input-checkbox-valid-2">drie</label>
</div>
<p class="dso-help-block" id="helpTextId_input-checkbox-valid">Selecteer alle even getallen</p>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-valid --><hr>
<!-- Start: @group-checkboxes--input-checkbox-disabled -->
<div class="dso-example-wrapper">
<div class="dso-example-text" aria-hidden="true">
<h2>Disabled</h2>
<p>Alle <code>input[type="checkbox"]</code> moeten een <code>disabled</code> attribuut krijgen.</p>
</div>
<div class="dso-example">
<fieldset class="form-group dso-checkboxes 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="checkbox" id="input-checkbox-disabled-0" name="input-checkbox-disabled" value="1" disabled="" checked="">
<label for="input-checkbox-disabled-0">een</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-1" name="input-checkbox-disabled" value="2" disabled="">
<label for="input-checkbox-disabled-1">twee</label>
</div>
<div class="dso-selectable">
<input type="checkbox" id="input-checkbox-disabled-2" name="input-checkbox-disabled" value="3" disabled="">
<label for="input-checkbox-disabled-2">drie</label>
</div>
</div>
</fieldset>
</div>
</div>
<!-- End: @group-checkboxes--input-checkbox-disabled --><hr>
<button type="submit" class="hidden">VALIDATOR_ONLY</button>
</form>