There are no notes for this item.
<!-- Default -->
<div class="form-group dso-confirm">
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="input-confirm" name="input-confirm">
<label for="input-confirm">
Ik ga akkoord met de voorwaarden
</label>
</div>
</div>
</div>
<!-- Input Confirm Required -->
<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="input-confirm-required" required>
<label for="input-confirm-required">
Ik ga akkoord met de voorwaarden
</label>
</div>
</div>
</div>
<!-- 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="input-confirm-invalid" required>
<label for="input-confirm-invalid">
Ik ga akkoord met de voorwaarden
</label>
</div>
<p class="dso-message">Maak een keuze.</p>
</div>
</div>
<!-- Input Confirm Valid -->
<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="input-confirm-valid" checked required>
<label for="input-confirm-valid">
Ik ga akkoord met de voorwaarden
</label>
</div>
</div>
</div>
<!-- Input Confirm Disabled -->
<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="input-confirm-disabled" disabled checked required>
<label for="input-confirm-disabled">
Ik ga akkoord met de voorwaarden
</label>
</div>
</div>
</div>
{% set localId = generateLocalId(prefix, id) %}
<div {{ className('form-group', 'dso-confirm', [state, 'dso-' + state], [required, 'dso-required']) }}>
<div class="dso-field-container">
<div class="dso-selectable">
<input type="checkbox" id="{{ localId }}" name="{{ id }}"
{% if disabled %} disabled{% endif %}
{% if checked %} checked{% endif %}
{% if required %} required{% endif %}>
<label for="{{ localId }}">
{{ label }}
</label>
</div>
{% if errorText %}
{% render '@error-block', {errorText: errorText} %}
{% endif %}
{% if helpText %}
{% render '@help-block', {helpText: helpText, id: localId} %}
{% endif %}
</div>
</div>
/* Default */
__title: default
id: input-confirm
label: Ik ga akkoord met de voorwaarden
/* Input Confirm Required */
__title: Verplicht
id: input-confirm-required
label: Ik ga akkoord met de voorwaarden
__explanation:
- >-
Een verplichte keuze wordt in de markup aangegeven met
<code>.dso-required</code> op de <code>.form-group.dso-confirm</code>
required: true
/* Input Confirm Invalid */
__title: Ongeldig
id: input-confirm-invalid
label: Ik ga akkoord met de voorwaarden
__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: Maak een keuze.
/* Input Confirm Valid */
__title: Geldig
id: input-confirm-valid
label: Ik ga akkoord met de voorwaarden
__explanation:
- >-
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>.
required: true
state: valid
checked: true
/* Input Confirm Disabled */
__title: Disabled
id: input-confirm-disabled
label: Ik ga akkoord met de voorwaarden
required: true
disabled: true
checked: true