Check mark

약관 혹은 동의 내용에 관하여 사용자의 읽음, 확인 등의 상태 여부를 표현하는 요소입니다.

Anatomy

  1. 1Control
  2. 2Label

Variants

Size
Tight

States

Clickable area

Checkmark의 Label까지 인터랙션 영역에 포함됩니다. Label에 Hover 시 Control 영역에 인터랙션이 적용됩니다.

Information confirm

약관이나 특정 내용의 숙지 여부를 확인하는 용도로 사용합니다. Inactive를 기본 값으로 권장하지만, 상황에 따라 Active를 기본값으로 둘 수 있습니다.

Gap

반복하여 List로 배치할 시 모바일에서 터치영역의 안정성을 유지하기 위해 8px 이상의 간격을 두는 것을 권장합니다.
간격을 8px 이상으로 조절할 시에는 4배수 단위로 높입니다.

How to use

Do

체크박스 내용의 상세 정보 동의 여부를 확인할 때 사용할 수 있습니다.

Don’t

다중 선택의 용도로 사용하지 않습니다.

Customize

Checkmark
typography
typographyColor

© 2026 Wanted Lab, Inc.