Checkbox

<fieldset>
  <legend>Kirimi saya kabar terbaru melalui</legend>

  <div class="option">
    <input type="checkbox" id="notify-email" name="notify" value="email" />
    <label for="notify-email">Email</label>
  </div>
  <div class="option">
    <input type="checkbox" id="notify-sms" name="notify" value="sms" />
    <label for="notify-sms">SMS</label>
  </div>
  <div class="option">
    <input type="checkbox" id="notify-whatsapp" name="notify" value="whatsapp" />
    <label for="notify-whatsapp">WhatsApp</label>
  </div>
</fieldset>

<div class="option">
  <input
    type="checkbox"
    id="terms"
    name="terms"
    aria-describedby="terms-status"
  />
  <label for="terms">Setujui syarat dan ketentuan</label>
</div>
<!-- Updated when the box is toggled, and announced politely -->
<p id="terms-status" aria-live="polite">
  Harap setujui syarat dan ketentuan.
</p>

<style>
  input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #1f2937;
  }
  input[type="checkbox"]:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
  }
</style>

<!-- A div "checkbox": no role, no state, not focusable -->
<div class="option">
  <div
    class="fake-checkbox"
    onclick="toggle()"
    style="width: 12px; height: 12px; border: 1px solid #ddd; background: #ddd"
  >
    <span style="color: #fff">✓</span>
  </div>
  <span onclick="toggle()" style="cursor: pointer">
    Setujui syarat dan ketentuan
  </span>
</div>
<p style="color: #999">Harap setujui syarat dan ketentuan.</p>

<!-- No fieldset/legend: the group has no name -->
<p>Kirimi saya kabar terbaru melalui</p>
<!-- Inputs with no label, tiny, no focus outline -->
<input type="checkbox" style="width: 10px; height: 10px; outline: none" /> Email
<input type="checkbox" style="width: 10px; height: 10px; outline: none" /> SMS
<input type="checkbox" style="width: 10px; height: 10px; outline: none" /> WhatsApp