<fieldset class="checkbox-group">
  <legend class="input-label">Notifications</legend>

  <label class="checkbox-item">
    <input type="checkbox" class="checkbox-input" checked />
    <span class="checkbox-box"></span>
    <span class="checkbox-label">Email notifications</span>
  </label>

  <label class="checkbox-item">
    <input type="checkbox" class="checkbox-input" />
    <span class="checkbox-box"></span>
    <span class="checkbox-label">Push notifications</span>
  </label>

  <label class="checkbox-item">
    <input type="checkbox" class="checkbox-input" disabled />
    <span class="checkbox-box"></span>
    <span class="checkbox-label checkbox-disabled">SMS (unavailable)</span>
  </label>
</fieldset>

<style>
.checkbox-group { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.checkbox-item { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; }
.checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox-box {
  width: 1.125rem; height: 1.125rem; border-radius: 0.3rem;
  border: 1.5px solid var(--border); background: var(--surface);
  flex-shrink: 0; transition: all 0.15s; position: relative;
}
.checkbox-input:checked + .checkbox-box {
  background: var(--accent); border-color: var(--accent);
}
.checkbox-input:checked + .checkbox-box::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 4px; height: 8px; border: 2px solid #fff;
  border-top: none; border-left: none; transform: rotate(45deg);
}
.checkbox-input:focus-visible + .checkbox-box { box-shadow: 0 0 0 3px var(--accent-dim); }
.checkbox-input:disabled + .checkbox-box { opacity: 0.4; cursor: not-allowed; }
.checkbox-label { font-size: 0.9375rem; }
.checkbox-disabled { color: var(--muted); }
</style>