Checkbox - Forms

Default checkbox group

<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" 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--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.3278a5c4.svg#check"></use>
        </svg></span>Spain</label>
    <div class="ecl-checkbox__help" id="helper-default-1">Helper text for option 1</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input" 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--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.3278a5c4.svg#check"></use>
        </svg></span>Belgium</label>
    <div class="ecl-checkbox__help" id="helper-default-2">Helper text for option 2</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" 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--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.3278a5c4.svg#check"></use>
        </svg></span>France (disabled)</label>
    <div class="ecl-checkbox__help ecl-checkbox__help--disabled" id="helper-default-3">Helper text for option 3</div>
  </div>
</fieldset>

Try it yourself on the playground

Playground

Invalid checkbox group

Fullscreen

<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__optional"> (optional)</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.3278a5c4.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" value="es" id="checkbox-default-1" 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.3278a5c4.svg#check"></use>
        </svg></span>Spain</label>
    <div class="ecl-checkbox__help" id="helper-default-1">Helper text for option 1</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" value="be" id="checkbox-default-2" /><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.3278a5c4.svg#check"></use>
        </svg></span>Belgium</label>
    <div class="ecl-checkbox__help" id="helper-default-2">Helper text for option 2</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--disabled"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" value="fr" id="checkbox-default-3" disabled="" /><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.3278a5c4.svg#check"></use>
        </svg></span>France (disabled)</label>
    <div class="ecl-checkbox__help ecl-checkbox__help--disabled" id="helper-default-3">Helper text for option 3</div>
  </div>
</fieldset>

Try it yourself on the playground

Playground

Optional checkbox group

Fullscreen

<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" 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--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.3278a5c4.svg#check"></use>
        </svg></span>Spain</label>
    <div class="ecl-checkbox__help" id="helper-default-1">Helper text for option 1</div>
  </div>
  <div class="ecl-checkbox"><input type="checkbox" name="checkbox-default" class="ecl-checkbox__input" 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--m ecl-checkbox__icon" focusable="false"
          aria-hidden="true">
          <use xlink:href="/dist/media/icons.3278a5c4.svg#check"></use>
        </svg></span>Belgium</label>
    <div class="ecl-checkbox__help" id="helper-default-2">Helper text for option 2</div>
  </div>
  <div class="ecl-checkbox ecl-checkbox--disabled"><input type="checkbox" name="checkbox-default"
      class="ecl-checkbox__input" 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--m ecl-checkbox__icon" focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.3278a5c4.svg#check"></use>
        </svg></span>France (disabled)</label>
    <div class="ecl-checkbox__help ecl-checkbox__help--disabled" id="helper-default-3">Helper text for option 3</div>
  </div>
</fieldset>

Try it yourself on the playground

Playground