Checkbox

<fieldset aria-describedby="checkbox-default-helper" class="ecl-form-group ecl-form-group--checkbox">
  <legend class="ecl-form-label" id="checkbox-default-label">Select your preferred destinations</legend>
  <div id="checkbox-default-helper" class="ecl-checkbox__help ecl-help-block">Helper text for the group</div>
  <div class="ecl-checkbox"><input type="checkbox" class="ecl-checkbox__input" id="checkbox-default-1"
      name="checkbox-default" value="es" checked="" /><label class="ecl-form-label ecl-checkbox__label"
      for="checkbox-default-1"><span class="ecl-checkbox__box"><svg focusable="false" aria-hidden="true"
          class="ecl-checkbox__icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
        </svg></span>Spain</label>
    <div id="helper-default-1" class="ecl-help-block ecl-checkbox__help">Help text for option 1</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" class="ecl-checkbox__input" id="checkbox-default-2"
      name="checkbox-default" value="be" /><label class="ecl-form-label ecl-checkbox__label"
      for="checkbox-default-2"><span class="ecl-checkbox__box"><svg focusable="false" aria-hidden="true"
          class="ecl-checkbox__icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
        </svg></span>Belgium</label>
    <div id="helper-default-2" class="ecl-help-block ecl-checkbox__help">Help text for option 2</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input type="checkbox" class="ecl-checkbox__input" disabled=""
      id="checkbox-default-3" name="checkbox-default" value="fr" /><label class="ecl-form-label ecl-checkbox__label"
      for="checkbox-default-3"><span class="ecl-checkbox__box ecl-checkbox__box--disabled"><svg focusable="false"
          aria-hidden="true" class="ecl-checkbox__icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
        </svg></span>France (disabled)</label>
    <div id="helper-default-3" class="ecl-help-block ecl-checkbox__help ecl-help-block--disabled">Help text for option 3
    </div>
  </div>
</fieldset>

<fieldset aria-describedby="checkbox-default-helper" class="ecl-form-group ecl-form-group--checkbox">
  <legend class="ecl-form-label ecl-form-label--invalid" id="checkbox-default-label">Select your preferred destinations
  </legend>
  <div id="checkbox-default-helper" class="ecl-checkbox__help ecl-help-block">Helper text for the group</div>
  <div class="ecl-feedback-message">Error message for the group</div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input type="checkbox" class="ecl-checkbox__input"
      id="checkbox-invalid-1" name="checkbox-invalid" value="es" checked="" /><label
      class="ecl-form-label ecl-checkbox__label ecl-form-label--invalid" for="checkbox-invalid-1"><span
        class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg focusable="false" aria-hidden="true"
          class="ecl-checkbox__icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
        </svg></span>Spain</label>
    <div id="helper-invalid-1" class="ecl-help-block ecl-checkbox__help">Help text for option 1</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input type="checkbox" class="ecl-checkbox__input"
      id="checkbox-invalid-2" name="checkbox-invalid" value="be" /><label
      class="ecl-form-label ecl-checkbox__label ecl-form-label--invalid" for="checkbox-invalid-2"><span
        class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg focusable="false" aria-hidden="true"
          class="ecl-checkbox__icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
        </svg></span>Belgium</label>
    <div id="helper-invalid-2" class="ecl-help-block ecl-checkbox__help">Help text for option 2</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--disabled"><input type="checkbox"
      class="ecl-checkbox__input" disabled="" id="checkbox-invalid-3" name="checkbox-invalid" value="fr" /><label
      class="ecl-form-label ecl-checkbox__label ecl-form-label--invalid" for="checkbox-invalid-3"><span
        class="ecl-checkbox__box ecl-checkbox__box--invalid ecl-checkbox__box--disabled"><svg focusable="false"
          aria-hidden="true" class="ecl-checkbox__icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--check"></use>
        </svg></span>France (disabled)</label>
    <div id="helper-invalid-3" class="ecl-help-block ecl-checkbox__help ecl-help-block--disabled">Help text for option 3
    </div>
  </div>
</fieldset>