# Checkbox URL: /components/checkbox Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/checkbox.mdx 사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다. Checkbox Group을 Field 내부에서 사용하여 Checkbox Group Field로 활용할 수 있습니다. ## Anatomy ![Checkbox의 Anatomy 이미지. Checkmark와 Label로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a0e9407c-eb7c-4f33-a9eb-f82640668724) 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/623f52de-d9c4-4646-8e35-530c77ca1a9f) Checkbox는 Medium, Large 사이즈로 제공됩니다. 강조해야 하거나 그룹으로 사용해야 하는 경우에 따라서 Weight를 조정해서 활용할 수 있습니다. ### Tone ![Checkbox의 Tone Property - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ada1a613-eb77-4d7e-8d00-768124097454) Checkbox는 Neutral을 기본으로 사용할 수 있습니다. ### Shape ![Checkbox의 Shape Property - Square, Ghost](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5010525d-d5f9-4dee-86d9-ccf9461a6094) 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/361d7cc3-bce8-4034-96ca-6836ba9543c8) 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/b60ce72f-2726-4ad6-a8d9-e559b6262d9d) ![Checkbox의 Touch Target 영역 - Row 전체 영역](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ad1416ec-862d-4e41-81b9-56568e11ecfd) Checkbox는 Label을 포함한 영역이 Target으로 동작합니다. List처럼 Checkmark를 조합해서 사용하는 경우 전체 Row가 Target 영역이 되어야 합니다. ### Checkbox group 사용하기 ![Checkbox Group 사용 예시 - 부모 Checkbox와 자식 Checkbox 구성: 모든 항목 선택 안 됨](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9cd54cc0-06da-4b29-820d-ffbb4f8b6a16) ![Checkbox Group 사용 예시 - 부모 Checkbox와 자식 Checkbox 구성: 모든 항목 선택됨](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b7078da3-328a-40c3-945b-41ce86b4cf23) ![Checkbox Group 사용 예시 - 부모 Checkbox와 자식 Checkbox 구성: 일부 항목 선택됨](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/80bb71f4-6d35-452b-a267-6390b450421f) ![Checkbox Group 사용 예시 - 부모 Checkbox가 없는 구성](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/07e8c055-9af5-4f65-bf9a-398417d91afb) ![Checkbox Group 사용 예시 - 응용](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/178986f4-04f6-4cf6-988b-775548657398) Checkbox는 여러 항목을 그룹으로 묶어서 제공할 수 있습니다. 그룹으로 묶이는 경우 필요에 따라서 부모 Checkbox를 최상단에 배치하세요. 부모 Checkbox를 선택하면 모든 자식 Checkbox가 선택됩니다. 자식 Checkbox 일부만 선택하면 부모 Checkbox는 Indeterminate 상태로 표시됩니다. ### Shape 결정하기 ![Checkbox Shape 선택 가이드 - Ghost](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b0b76451-1708-4440-8c7f-61bc2a8c2af5) ![Checkbox Shape 선택 가이드 - Square](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e973834d-b6df-4bf5-8295-b98fea368de1) 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 Ghost를 사용하는 것을 권장합니다. 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 명시적인 Square을 사용하세요. ### Checkbox vs. Switch ![Checkbox와 Switch 비교표](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/d9a88f2a-8576-466e-b435-55ffaff61efb) 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