DSO Toolkit homepage

Confirm

Component preview opent in nieuw tabblad

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" aria-invalid="true" aria-describedby="errorTextId_input-confirm-invalid" required>
            <label for="input-confirm-invalid">
                Ik ga akkoord met de voorwaarden
            </label>

        </div>

        <p class="dso-message" id="errorTextId_input-confirm-invalid">Dit moet u verplicht aanvinken.</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" required checked>
            <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 required checked>
            <label for="input-confirm-disabled">
                Ik ga akkoord met de voorwaarden
            </label>

        </div>

    </div>
</div>
{% set localId = generateLocalId(prefix, id) %}

{% set helpTextId = 'helpTextId_' + localId %}
{% set errorTextId = 'errorTextId_' + localId %}

{% if errorText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + errorTextId %}
{% endif %}
{% if helpText %}
  {% set ariaDescribedBy = ((ariaDescribedBy + ' ') if ariaDescribedBy) + helpTextId %}
{% endif %}

<div {{ className('form-group', 'dso-confirm', [state, 'dso-' + state], [required, 'dso-required']) }}>
  <div class="dso-field-container">
    {% render '@selectable', {
      type: 'checkbox',
      id: localId,
      name: id,
      label: label,
      disabled: disabled,
      checked: checked,
      required: required,
      invalid: state == 'invalid',
      ariaDescribedBy: ariaDescribedBy
    } %}
    {% if errorText %}
      {% render '@error-block', {errorText: errorText, id: errorTextId} %}
    {% endif %}
    {% if helpText %}
      {% render '@help-block', {helpText: helpText, id: helpTextId} %}
    {% endif %}
  </div>
</div>
/* Default */
__title: default
id: input-confirm
label: Ik ga akkoord met de voorwaarden
/* Input Confirm Required */
__title: required
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: invalid
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: Dit moet u verplicht aanvinken.
/* Input Confirm Valid */
__title: valid
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