DSO Toolkit | Component Library

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>


<!-- 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="" value="" 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="" 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>


<!-- 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="" value="" 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="" value="" disabled checked required />
            <label for="input-confirm-disabled">
                Ik ga akkoord met de voorwaarden
            </label>
        </div>
    </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>
 
/* Default */
id: input-confirm
label: Ik ga akkoord met de voorwaarden



/* Input Confirm Required */
id: input-confirm-required
label: Ik ga akkoord met de voorwaarden
__title: Verplicht
__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 */
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



/* Input Confirm Valid */
id: input-confirm-valid
label: Ik ga akkoord met de voorwaarden
__title: Geldig
__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 */
id: input-confirm-disabled
label: Ik ga akkoord met de voorwaarden
__title: Disabled
required: true
disabled: true
checked: true

There are no notes for this item.