Checkbox field

Field label

Option AOption BOption COption D

Voorbeeld HTML

<div
  role="group"
  aria-labelledby="fieldId-label"
  class="utrecht-form-field utrecht-form-field--text rvo-form-field"
>
  <div class="rvo-form-field__label">
    <label class="rvo-label" id="fieldId-label" for="fieldId">
      <div>Field label</div>
    </label>
  </div>
  <div class="rvo-checkbox__group">
    <label class="rvo-checkbox rvo-checkbox--not-checked" for="optionA">
      <input
        id="optionA"
        name="group"
        class="rvo-checkbox__input"
        type="checkbox"
        value=""
      />
      Option A
    </label>
    <label class="rvo-checkbox rvo-checkbox--checked" for="optionB">
      <input
        id="optionB"
        name="group"
        class="rvo-checkbox__input"
        type="checkbox"
        checked=""
        value=""
      />
      Option B
    </label>
    <label class="rvo-checkbox rvo-checkbox--not-checked" for="optionC">
      <input
        id="optionC"
        name="group"
        class="rvo-checkbox__input"
        type="checkbox"
        value=""
      />
      Option C
    </label>
    <label class="rvo-checkbox rvo-checkbox--not-checked" for="optionD">
      <input
        id="optionD"
        name="group"
        class="rvo-checkbox__input"
        type="checkbox"
        value=""
      />
      Option D
    </label>
  </div>
</div>

Open in nieuwe tab

Documentatie voor checkbox field

Algemene veldregels:

• Gebruik (niet verplicht) bij optionele formulier velden in plaats van * (verplicht) bij verplichte formulier velden
• Gebruik expandable tekst in plaats van een toggle knop
• Gebruik expandable tekst in plaats van een ‘?’ uitleg icoontje