Components

Checkbox

복수 선택·동의에 쓰는 선택 컴포넌트입니다.

코드 보기
<label class="consent-row">
  <input type="checkbox"> 레이블
</label>
/* input{ accent-color: var(--foreground); } */

Variants

이름설명미리보기
기본accent-color = 검정
checked검정 채움
disabledmuted 처리

Guidelines

✓ Do
  • accent-color로 시스템 체크박스를 브랜드화 (커스텀 그리기 금지)
  • 레이블 클릭도 토글되게 label로 감싼다
✕ Don't
  • 단일 선택에 쓰지 않는다 (Radio 사용)
  • 기본 체크 상태로 두지 않는다 (opt-in)

Specification

속성토큰/값비고
크기15px
accentvar(--foreground)

비교

Checkbox vs Switch — Checkbox는 제출 전 선택, Switch는 즉시 반영되는 설정.