@vcl/vcl/checkbox/demo/example-vertical.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<div id="example-checkbox-basic">
  <h3>Vertical</h3>
  <div class="col">
    <div class="checkbox" role="checkbox" aria-checked="false" aria-labelledby="checkbox-label-3">
      <label id="checkbox-label-3" class="checkbox-label" tabindex="0">
        <div class="icon fas fa-square"></div>
        Option 1
      </label>
    </div>
    <div class="checkbox" role="checkbox" aria-checked="true" aria-labelledby="checkbox-label-4">
      <label id="checkbox-label-4" class="checkbox-label" tabindex="0">
        <div class="icon fas fa-check-square"></div>
        Option 2
      </label>
    </div>
  </div>
</div>

<script>
  const docRoot = document.demoShadowRoot || document;

  const checkboxes = docRoot.querySelectorAll('#example-checkbox-basic .checkbox');
  checkboxes.forEach(checkbox => {
    const label = checkbox.querySelector('label');
    const icon = checkbox.querySelector('.icon');

    label.addEventListener('click', () => {
      const disabled = checkbox.getAttribute('aria-disabled') === 'true';
      const checked = checkbox.getAttribute('aria-checked') === 'true';
      if (disabled) {
        return;
      }
      if (checked) {
        checkbox.setAttribute('aria-checked', 'false');
        icon.classList.remove('fa-check-square');
        icon.classList.add('fa-square');
      } else {
        checkbox.setAttribute('aria-checked', 'true');
        icon.classList.add('fa-check-square');
        icon.classList.remove('fa-square');
      }
    });
  })
</script>