Checkbox
Checkbox는 여러 항목 중 복수 선택이 필요한 경우에 사용됩니다. 사용자는 하나 이상의 옵션을 동시에 선택하거나 해제할 수 있으며, 주로 설정, 동의 항목, 필터 옵션 등에서 사용됩니다.
Checkbox
Checkbox는 여러 항목 중 복수 선택이 필요한 경우에 사용됩니다. 사용자는 하나 이상의 옵션을 동시에 선택하거나 해제할 수 있으며, 주로 설정, 동의 항목, 필터 옵션 등에서 사용됩니다.
Checkbox
Checkbox는 여러 항목 중 복수 선택이 필요한 경우에 사용됩니다. 사용자는 하나 이상의 옵션을 동시에 선택하거나 해제할 수 있으며, 주로 설정, 동의 항목, 필터 옵션 등에서 사용됩니다.
Anatomy
ESSENTIAL
1. 체크박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다. 체크 상태에 따라 checked, unchecked, indeterminate 등의 시각적 상태를 가집니다.
OPTIONAL
2. 레이블
체크박스의 의미를 명확히 설명하는 텍스트입니다.
3. 설명문
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 보통 작은 크기와 낮은 대비로 표현됩니다.
Anatomy
ESSENTIAL
1. 체크박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다. 체크 상태에 따라 checked, unchecked, indeterminate 등의 시각적 상태를 가집니다.
OPTIONAL
2. 레이블
체크박스의 의미를 명확히 설명하는 텍스트입니다.
3. 설명문
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 보통 작은 크기와 낮은 대비로 표현됩니다.
Anatomy
ESSENTIAL
1. 체크박스
사용자가 클릭하여 선택 여부를 전환하는 상호작용 영역입니다. 체크 상태에 따라 checked, unchecked, indeterminate 등의 시각적 상태를 가집니다.
OPTIONAL
2. 레이블
체크박스의 의미를 명확히 설명하는 텍스트입니다.
3. 설명문
레이블을 보조하는 부가 텍스트로, 선택 항목에 대한 추가 정보를 제공합니다. 보통 작은 크기와 낮은 대비로 표현됩니다.
State
Control
state
default
hover
disabled
selected
has label
Control
state
default
hover
disabled
selected
has label
Control
state
default
hover
disabled
selected
has label
Properties
size | L, S |
state | default, hover, disabled |
variant | checked, indeterminate |
description | false, true |
Properties
size | L, S |
state | default, hover, disabled |
variant | checked, indeterminate |
description | false, true |
Properties
size | L, S |
state | default, hover, disabled |
variant | checked, indeterminate |
description | false, true |
Spec
 | Clickable Area레이블까지 클릭할 수 있게 합니다. |
 | Spacing & Alignment리스트에 사용할 때는 최소 12px의 간격을 가져야 합니다. |
Spec
Clickable Area
레이블까지 클릭할 수 있게 합니다.
Spacing & Alignment
리스트에 사용할 때는 최소 12px의 간격을 가져야 합니다.
Spec
| Clickable Area레이블까지 클릭할 수 있게 합니다. |
| Spacing & Alignment리스트에 사용할 때는 최소 12px의 간격을 가져야 합니다. |
Usage
Do
label없이 단독으로 사용 가능합니다.(ex. 토픽 카드)
Don't
1개만 선택할 수 있는 경우에는 체크박스를 사용하지 않습니다.
Usage
Do
label없이 단독으로 사용 가능합니다.(ex. 토픽 카드)
Don't
1개만 선택할 수 있는 경우에는 체크박스를 사용하지 않습니다.
Usage
Do
label없이 단독으로 사용 가능합니다.(ex. 토픽 카드)
Don't
1개만 선택할 수 있는 경우에는 체크박스를 사용하지 않습니다.