Checkbox

<fieldset class="ecl-form-group" aria-describedby="checkbox-default-helper">
  <legend id="checkbox-default-label" class="ecl-form-label">Select your preferred destinations<span
      class="ecl-form-label__required" role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="checkbox-default-helper">Helper text for the group</div>
  <div class="ecl-checkbox"><input name="checkbox-default" class="ecl-checkbox__input" type="checkbox" value="es"
      id="checkbox-default-1" checked required><label for="checkbox-default-1" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label></div>
  <div class="ecl-checkbox"><input name="checkbox-default" class="ecl-checkbox__input" type="checkbox" value="be"
      id="checkbox-default-2" required><label for="checkbox-default-2" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Belgium</span></label></div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input name="checkbox-default" class="ecl-checkbox__input"
      type="checkbox" value="fr" id="checkbox-default-3" disabled required><label for="checkbox-default-3"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--disabled"><svg
          class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">France (disabled)</span></label></div>
  <div class="ecl-checkbox"><input name="checkbox-default" class="ecl-checkbox__input" type="checkbox" value="lorem"
      id="checkbox-default-4" required><label for="checkbox-default-4" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur
          adipiscing elit</a></span></label></div>
</fieldset>

<fieldset class="ecl-form-group" aria-describedby="checkbox-default-helper checkbox-default-invalid"
  aria-invalid="true">
  <legend id="checkbox-default-label" class="ecl-form-label ecl-form-label--invalid">Select your preferred
    destinations<span class="ecl-form-label__required" role="note" aria-label="required">*</span></legend>
  <div class="ecl-help-block" id="checkbox-default-helper">Helper text for the group</div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input name="checkbox-default" class="ecl-checkbox__input"
      type="checkbox" value="es" id="checkbox-default-1" checked required><label for="checkbox-default-1"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg
          class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label></div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input name="checkbox-default" class="ecl-checkbox__input"
      type="checkbox" value="be" id="checkbox-default-2" required><label for="checkbox-default-2"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg
          class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Belgium</span></label></div>
  <div class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--disabled"><input name="checkbox-default"
      class="ecl-checkbox__input" type="checkbox" value="fr" id="checkbox-default-3" disabled required><label
      for="checkbox-default-3" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box ecl-checkbox__box--invalid ecl-checkbox__box--disabled"><svg
          class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">France (disabled)</span></label></div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input name="checkbox-default" class="ecl-checkbox__input"
      type="checkbox" value="lorem" id="checkbox-default-4" required><label for="checkbox-default-4"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg
          class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur
          adipiscing elit</a></span></label></div>
  <div class="ecl-feedback-message" id="checkbox-default-invalid"><svg
      class="ecl-icon ecl-icon--s ecl-feedback-message__icon" focusable="false" aria-hidden="false" role="img">
      <title>Error</title>
      <use xlink:href="/dist/media/icons.e3d8f25c.svg#error"></use>
    </svg>Error message for the group</div>
</fieldset>

<fieldset class="ecl-form-group" aria-describedby="checkbox-default-helper">
  <legend id="checkbox-default-label" class="ecl-form-label">Select your preferred destinations<span
      class="ecl-form-label__optional">(optional)</span></legend>
  <div class="ecl-help-block" id="checkbox-default-helper">Helper text for the group</div>
  <div class="ecl-checkbox"><input name="checkbox-default" class="ecl-checkbox__input" type="checkbox" value="es"
      id="checkbox-default-1" checked><label for="checkbox-default-1" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label></div>
  <div class="ecl-checkbox"><input name="checkbox-default" class="ecl-checkbox__input" type="checkbox" value="be"
      id="checkbox-default-2"><label for="checkbox-default-2" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Belgium</span></label></div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input name="checkbox-default" class="ecl-checkbox__input"
      type="checkbox" value="fr" id="checkbox-default-3" disabled><label for="checkbox-default-3"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--disabled"><svg
          class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">France (disabled)</span></label></div>
  <div class="ecl-checkbox"><input name="checkbox-default" class="ecl-checkbox__input" type="checkbox" value="lorem"
      id="checkbox-default-4"><label for="checkbox-default-4" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur
          adipiscing elit</a></span></label></div>
</fieldset>

<fieldset class="ecl-form-group">
  <div class="ecl-checkbox ecl-checkbox--single"><input name="checkbox-default" class="ecl-checkbox__input"
      type="checkbox" value="es" id="checkbox-default-1" checked required><label for="checkbox-default-1"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--xs ecl-checkbox__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.e3d8f25c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label></div>
</fieldset>