# Checkbox
URL: /components/checkbox
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/checkbox.mdx

사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/checkbox) | Done |
| [Lynx](/lynx/components/checkbox) | Done |
| iOS | Done |
| Android | Done |

<Card href="/components/field" title="Field">
  Checkbox Group을 Field 내부에서 사용하여 Checkbox Group Field로 활용할 수
  있습니다.
</Card>

## Anatomy

![Checkbox의 Anatomy 이미지. Checkmark와 Label로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8419b9e3-8b32-4622-82b0-9f446d06f6e8)

Checkbox는 Checkmark와 Label로 구성됩니다. Checkmark는 개별 컴포넌트로 제공되어서 자유롭게 조합해서 사용할 수 있습니다.

## Properties

### Size, Weight

![Checkbox의 Size와 Weight Property - Medium, Large 사이즈와 Regular, Bold 굵기](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/babfb198-26c3-431e-b5f2-8938cfa11d01)

Checkbox는 Medium, Large 사이즈로 제공됩니다. 강조해야 하거나 그룹으로 사용해야 하는 경우에 따라서 Weight를 조정해서 활용할 수 있습니다.

### Tone

![Checkbox의 Tone Property - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6ba3746e-c9e8-4c22-9708-a3be5276e0bd)

Checkbox는 Neutral을 기본으로 사용할 수 있습니다.

### Shape

![Checkbox의 Shape Property - Square, Ghost](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ba366d64-5060-4fcd-856e-f87a5caa5641)

Checkbox는 Square, Ghost 두 가지 Shape으로 제공됩니다. Checkmark도 동일하게 제공되니 참고하세요.

### State

![Checkbox의 State - Selected, Unselected, Indeterminate 상태와 Enabled, Pressed, Disabled 조합](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/526a7db5-d582-4797-ad16-404cf4bde021)

Checkbox는 선택(Selected), 미선택(Unselected), 불확실(Indeterminate) 상태를 가지며, 이 각각의 상태는 사용자의 상호작용에 따라 활성화(Enabled), 비활성화(Disabled), 눌림(Pressed)의 상태로 조합되어 표현됩니다.

## Guidelines

### Checkbox touch target

![Checkbox의 Touch Target 영역 - Label 포함 영역](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/47614a9e-21e7-4b9e-ac1c-2241092efbb8)

![Checkbox의 Touch Target 영역 - Row 전체 영역](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ae59565d-0393-4571-b0e2-258ffb922182)

Checkbox는 Label을 포함한 영역이 Target으로 동작합니다. List처럼 Checkmark를 조합해서 사용하는 경우 전체 Row가 Target 영역이 되어야 합니다.

### Checkbox group 사용하기

![Checkbox Group 사용 예시 - 부모 Checkbox와 자식 Checkbox 구성: 모든 항목 선택 안 됨](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2ce271c9-d015-4ada-9bf2-d17566c06dc4)

![Checkbox Group 사용 예시 - 부모 Checkbox와 자식 Checkbox 구성: 모든 항목 선택됨](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dfedba2d-55b7-467f-a7e2-5e0a1d4f84ba)

![Checkbox Group 사용 예시 - 부모 Checkbox와 자식 Checkbox 구성: 일부 항목 선택됨](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b94e4ac8-6ba0-4c55-8487-297cd137e9f1)

![Checkbox Group 사용 예시 - 부모 Checkbox가 없는 구성](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6b47683b-b64c-4eb0-9f7f-ba0447903bde)

![Checkbox Group 사용 예시 - 응용](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e2f39429-204e-4ed5-a89b-0414b4b9ba9b)

Checkbox는 여러 항목을 그룹으로 묶어서 제공할 수 있습니다. 그룹으로 묶이는 경우 필요에 따라서 부모 Checkbox를 최상단에 배치하세요.

부모 Checkbox를 선택하면 모든 자식 Checkbox가 선택됩니다. 자식 Checkbox 일부만 선택하면 부모 Checkbox는 Indeterminate 상태로 표시됩니다.

### Shape 결정하기

![Checkbox Shape 선택 가이드 - Ghost](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c5c443f4-52a5-4275-b0fc-70da655efcb2)

![Checkbox Shape 선택 가이드 - Square](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/fe4eced0-51c7-4eae-b0fb-edd9df1aca3c)

필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 Ghost를 사용하는 것을 권장합니다. 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 명시적인 Square을 사용하세요.

### Checkbox vs. Switch

![Checkbox와 Switch 비교표](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f17f4163-60f2-4930-8723-66a5fd8d8ef3)

Checkbox와 [Switch](/components/switch)는 사용자의 선택 여부를 표시하는 컴포넌트입니다.

| 속성           | Checkbox                     | Switch                  |
| ------------ | ---------------------------- | ----------------------- |
| **선택값 적용**   | 저장하기 등의 액션을 수행해야 값이 저장됨 (권장) | 별다른 액션이 없어도 즉시 적용됨 (권장) |
| **항목 구성 방식** | 하나의 카테고리에 여러 항목으로 나열할 수 있음   | 개별 항목으로 구성하는 것을 권장      |
| **하위 항목 구성** | 부모가 모든 하위 항목을 선택/해제할 수 있음    | 부모와 하위 항목간 관계가 없음       |

## Specification

### Checkbox Group

Component spec (JSON): /rootage/components/checkbox-group.json

### Checkbox

Component spec (JSON): /rootage/components/checkbox.json

### Checkmark

Component spec (JSON): /rootage/components/checkmark.json