Gwecode.
Forms & inputs

Checkbox Group

A styled group of custom checkboxes inside a fieldset, letting a learner pick several topics of interest.

live preview 
<fieldset class="ckgroup-fieldset">
  <legend class="ckgroup-legend">Pick topics you want to learn</legend>
  <label class="ckgroup-row">
    <input type="checkbox" class="ckgroup-input" checked>
    <span class="ckgroup-box">
      <svg class="ckgroup-check" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#ffffff" stroke-width="3"><polyline points="4 12 9 17 20 6"></polyline></svg>
    </span>
    HTML and CSS
  </label>
  <label class="ckgroup-row">
    <input type="checkbox" class="ckgroup-input">
    <span class="ckgroup-box">
      <svg class="ckgroup-check" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#ffffff" stroke-width="3"><polyline points="4 12 9 17 20 6"></polyline></svg>
    </span>
    JavaScript Basics
  </label>
  <label class="ckgroup-row">
    <input type="checkbox" class="ckgroup-input">
    <span class="ckgroup-box">
      <svg class="ckgroup-check" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="#ffffff" stroke-width="3"><polyline points="4 12 9 17 20 6"></polyline></svg>
    </span>
    Databases
  </label>
</fieldset>
.ckgroup-fieldset {
  box-sizing: border-box;
  width: 240px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
  font-family: system-ui, -apple-system, sans-serif;
}
.ckgroup-legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.ckgroup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  padding: 8px 0;
  cursor: pointer;
}
.ckgroup-input {
  opacity: 0;
  position: absolute;
  width: 18px;
  height: 18px;
}
.ckgroup-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid #d1d5db;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #ffffff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ckgroup-check {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ckgroup-input:checked + .ckgroup-box {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
.ckgroup-input:checked + .ckgroup-box .ckgroup-check {
  opacity: 1;
}