Checkbox

Input의 checkbox는 Label을 포함한 Checkbox로, 하나 이상의 선택지를 선택하거나 해제할 수 있습니다. 복수 선택이 가능하며, 항목의 ‘선택됨’ 또는 ‘선택되지 않음’ 상태를 명확하게 표현합니다.

Anatomy

  1. 1Control
  2. 2Label

Variants

Size
Tight
Bold

States

Clickable area

다중 항목을 선택할 때 사용하며 터치 영역에 따라 Cell 혹은 Input/Checkbox를 선택 적용합니다.

  • Input/Checkbox: Control과 Label 영역만 터치 영역
  • Cell: 공백을 포함한 모든 영역이 터치 영역

Hierarchy

Level.2 → 상위 항목의 동의 및 선택 여부를 표현합니다.

Level.1 → 하위 항목의 동의 및 선택 여부를 표현합니다.

Gap

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

How to use

Do

사용성을 고려하여 터치 영역에 따라 Cell과 Input을 적절히 배치하여 사용합니다.

Don’t

Control을 우측에 배치하여 사용하지 않습니다.

Customize

Label
typography
typographyColor

© 2026 Wanted Lab, Inc.