Checkbox
Checkbox
Checkbox
Checkbox는 여러 항목 중 복수 선택이 필요한 경우에 사용됩니다. 사용자는 하나 이상의 옵션을 동시에 선택하거나 해제할 수 있으며, 주로 설정, 동의 항목, 필터 옵션 등에서 사용됩니다.
Checkbox
Checkbox는 여러 항목 중 복수 선택이 필요한 경우에 사용됩니다. 사용자는 하나 이상의 옵션을 동시에 선택하거나 해제할 수 있으며, 주로 설정, 동의 항목, 필터 옵션 등에서 사용됩니다.
Anatomy
ESSENTIAL
1. 체크박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다. 여러 항목이 있는 경우, 방향키 또는 Tab 키로 옵션 간 이동을 지원합니다.
OPTIONAL
2. 레이블
체크박스의 의미를 명확히 설명하는 텍스트입니다. 레이블 없이 단독으로 사용할 수 있습니다.
3. 설명문
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 설명문은 레이블과 함께 사용하는 것을 권장합니다.
Anatomy
ESSENTIAL
1. 체크박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다. 여러 항목이 있는 경우, 방향키 또는 Tab 키로 옵션 간 이동을 지원합니다.
OPTIONAL
2. 레이블
체크박스의 의미를 명확히 설명하는 텍스트입니다. 레이블 없이 단독으로 사용할 수 있습니다.
3. 설명문
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 설명문은 레이블과 함께 사용하는 것을 권장합니다.
State
State
State
Properties
Selected | false, true |
Label | false, true |
Description | false, true |
State | default, hover, disabled |
Size | L, S |
Properties
Selected | false, true |
Label | false, true |
Description | false, true |
State | default, hover, disabled |
Size | L, S |
Spec
 | Clickable Area레이블까지 포함한 행 전체를 클릭해 선택 상태를 변경할 수 있습니다. |
 | Spacing & Alignment리스트에 사용할 때는 최소 12px의 간격을 가집니다. |
Spec
Clickable Area
레이블까지 포함한 행 전체를 클릭해 선택 상태를 변경할 수 있습니다. 체크박스와 텍스트는 동일한 인터랙션을 가집니다.
Spacing & Alignment
리스트에 사용할 때는 최소 12px의 간격을 가집니다.
Usage
Do
레이블 없이 단독으로 사용할 수 있습니다.
Don't
1개만 선택할 수 있는 경우에는 체크박스를 사용하지 않고 라디오 버튼을 권장합니다.
Usage
Do
레이블 없이 단독으로 사용할 수 있습니다.
Don't
1개만 선택할 수 있는 경우에는 체크박스를 사용하지 않고 라디오 버튼을 권장합니다.