Checkbox

<fieldset class="ecl-form-group" aria-describedby="checkbox-default-helper">
  <legend class="ecl-form-label" id="checkbox-default-label">Select your preferred destinations<span
      class="ecl-form-label__required">*</span></legend>
  <div class="ecl-help-block" id="checkbox-default-helper">Helper text for the group</div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
      id="checkbox-default-1" value="es" checked="" /><label for="checkbox-default-1" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label>
    <div class="ecl-checkbox__help" id="helper-default-1">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
      id="checkbox-default-2" value="be" /><label for="checkbox-default-2" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Belgium</span></label>
    <div class="ecl-checkbox__help" id="helper-default-2">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" id="checkbox-default-3" disabled="" value="fr" /><label for="checkbox-default-3"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--disabled"><svg
          class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">France (disabled)</span></label>
    <div class="ecl-checkbox__help ecl-checkbox__help--disabled" id="helper-default-3">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
      id="checkbox-default-4" value="lorem" /><label for="checkbox-default-4" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur
          adipiscing elit</a>. Nullam suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec
        turpis eleifend dignissim a in massa.</span></label>
    <div class="ecl-checkbox__help" id="helper-default-4">Helper text for an option</div>
  </div>
</fieldset>

<fieldset class="ecl-form-group" aria-describedby="checkbox-default-helper">
  <legend class="ecl-form-label ecl-form-label--invalid" id="checkbox-default-label">Select your preferred
    destinations<span class="ecl-form-label__required">*</span></legend>
  <div class="ecl-help-block" id="checkbox-default-helper">Helper text for the group</div>
  <div class="ecl-feedback-message"><svg class="ecl-icon ecl-icon--m ecl-feedback-message__icon" focusable="false"
      aria-hidden="true">
      <use xlink:href="/dist/media/icons.16df4a0c.svg#error"></use>
    </svg> Error message for the group</div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" id="checkbox-default-1" value="es" checked="" /><label for="checkbox-default-1"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg
          class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label>
    <div class="ecl-checkbox__help" id="helper-default-1">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" id="checkbox-default-2" value="be" /><label for="checkbox-default-2"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg
          class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Belgium</span></label>
    <div class="ecl-checkbox__help" id="helper-default-2">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--disabled"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" id="checkbox-default-3" disabled="" value="fr" /><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--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">France (disabled)</span></label>
    <div class="ecl-checkbox__help ecl-checkbox__help--disabled" id="helper-default-3">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" id="checkbox-default-4" value="lorem" /><label for="checkbox-default-4"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--invalid"><svg
          class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur
          adipiscing elit</a>. Nullam suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec
        turpis eleifend dignissim a in massa.</span></label>
    <div class="ecl-checkbox__help" id="helper-default-4">Helper text for an option</div>
  </div>
</fieldset>

<fieldset class="ecl-form-group" aria-describedby="checkbox-default-helper">
  <legend class="ecl-form-label" id="checkbox-default-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 type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
      id="checkbox-default-1" value="es" checked="" /><label for="checkbox-default-1" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Spain</span></label>
    <div class="ecl-checkbox__help" id="helper-default-1">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
      id="checkbox-default-2" value="be" /><label for="checkbox-default-2" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Belgium</span></label>
    <div class="ecl-checkbox__help" id="helper-default-2">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" id="checkbox-default-3" disabled="" value="fr" /><label for="checkbox-default-3"
      class="ecl-checkbox__label"><span class="ecl-checkbox__box ecl-checkbox__box--disabled"><svg
          class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">France (disabled)</span></label>
    <div class="ecl-checkbox__help ecl-checkbox__help--disabled" id="helper-default-3">Helper text for an option</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input"
      id="checkbox-default-4" value="lorem" /><label for="checkbox-default-4" class="ecl-checkbox__label"><span
        class="ecl-checkbox__box"><svg class="ecl-icon ecl-icon--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.16df4a0c.svg#check"></use>
        </svg></span><span class="ecl-checkbox__text">Lorem ipsum dolor sit amet, <a href="/example">consectetur
          adipiscing elit</a>. Nullam suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec
        turpis eleifend dignissim a in massa.</span></label>
    <div class="ecl-checkbox__help" id="helper-default-4">Helper text for an option</div>
  </div>
</fieldset>