체크박스

서로 독립된 항목을 켜고 끌 때 — 하나도 안 고름과 전부 고름이 모두 답이 될 수 있을 때.

실제 미리보기

출처

HTML CSS

<label class="dc-cb">
  <input class="dc-cb__input" type="checkbox" name="agree" value="terms" checked>
  <span class="dc-cb__text">이용약관과 개인정보 처리방침에 동의합니다
    <span class="dc-cb__sub">주문 내역은 5년간 보관됩니다.</span>
  </span>
</label>

.dc-cb {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  min-height: 44px; padding: var(--dc-2) 0;
  font-family: var(--dc-font); cursor: pointer;
}
.dc-cb__input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 22px; height: 22px; margin: 0;
  position: relative; top: 1px;
  border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-xs);
  background: var(--dc-surface); cursor: inherit;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-cb__input::after { content: ""; position: absolute; inset: 0; opacity: 0; }
.dc-cb__input:hover { border-color: var(--dc-line-bold); }
.dc-cb__input:checked,
.dc-cb__input:indeterminate,
.dc-cb__input.is-indeterminate {
  background: var(--dc-brand); border-color: var(--dc-brand);
}
.dc-cb__input:checked::after {
  opacity: 1; inset: 4px 4px 6px 4px;
  border: 2px solid var(--dc-text-on);
  border-top: 0; border-left: 0;
  transform: rotate(40deg);
}
.dc-cb__input:indeterminate::after,
.dc-cb__input.is-indeterminate::after {
  opacity: 1; inset: 9px 4px;
  background: var(--dc-text-on); border-radius: var(--dc-r-full);
}
.dc-cb__input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dc-brand-soft); }
.dc-cb__input[aria-invalid="true"] { border-color: var(--dc-danger); }
.dc-cb__input[disabled] {
  background: var(--dc-sunken); border-color: var(--dc-line); cursor: not-allowed;
}
.dc-cb__input[disabled]:checked { background: var(--dc-text-mute); border-color: var(--dc-text-mute); }
.dc-cb__text {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 15px; line-height: 1.5; color: var(--dc-text);
}
.dc-cb__sub { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-cb__input[disabled] ~ .dc-cb__text { color: var(--dc-text-mute); }
.dc-cb__set { border: 0; margin: 0; padding: 0; font-family: var(--dc-font); }
.dc-cb__legend {
  padding: 0; margin-bottom: var(--dc-1);
  font-size: 14px; font-weight: 600; color: var(--dc-text);
}
.dc-cb__error {
  margin: var(--dc-1) 0 0; display: flex; align-items: flex-start; gap: var(--dc-1);
  font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--dc-danger);
}

이렇게 씁니다

누르는 영역은 글자까지다. label 로 감싸면 저절로 넓어진다
항목 이름은 켠 상태를 기준으로 쓴다 — "알림 끄지 않기" 같은 부정은 쓰지 않는다
하위 항목이 일부만 켜졌으면 상위 항목은 일부 선택으로 둔다

주의할 점

체크 표시를 직접 그릴 때 input 을 display:none 으로 숨기면 키보드로 닿지 않는다
여러 항목이 한 질문에 속하면 fieldset·legend 로 묶어야 스크린리더가 질문을 읽는다

다음에 볼 것