Web - Checkbox

Definition

정의	Checkbox
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

체크박스는 이용자들이 제공된 여러가지 옵션들 중 다중 선택할 수 있게 해주는 요소입니다.

확인과 같은 버튼을 같이 제공하여 적용할 수 있으므로, 많은 설정을 한 번에 적용할 때 사용하는 것이 좋습니다. (예를 들면, 약관 동의에 대한 것들) 또한 적용 전, 이용자들이 한 번 더 확인하고 검토 할 수 있습니다.

체크박스 종류

‌

종류

Unselected	Selected
선택 전 기본 상태 입니다. 선택 시, Selected 상태로 전환됩니다.	선택한 상태입니다. Selected 상태에서 한 번 더 선택 시 Unselected 상태로 전환됩니다.

Spec

Guide

‌*아이콘과 텍스트 전체가 터치 영역입니다.

Size, Property

종류

Height

text

icon

XSmall

24px

font size : body2
font weight : regular, bold

textLineType : single일 경우, 행간 singleLine 적용

그 외 body2에 적용한 행간 적용

Unselected
- fillType : line
- iconName : ic_checkbox_off
Selected
- fillType : fill
- iconName : ic_checkbox_on

Color 구성

‌

Icon Color

Unselected : 시스템 컬러를 적용합니다.
Selected : 브랜드 컬러를 적용합니다.

Text

시스템 컬러를 적용합니다.

Color Key

	iconColor	textColor
unselected	default :`ui_cpnt_selcontrols_icon_default` disabled : `ui_cpnt_selcontrols_icon_disabled`	default : `ui_cpnt_selcontrols_text_default` disabled : `ui_cpnt_selcontrols_text_disabled`
selected	default :`ui_cpnt_selcontrols_icon_primary` disabled : `ui_cpnt_selcontrols_icon_on_base_hover` (`ui_cpnt_selcontrols_icon_primary` 위에 겹쳐짐)	default : `ui_cpnt_selcontrols_text_default` disabled : `ui_cpnt_selcontrols_text_disabled`

Properties

text

표시할 텍스트 값입니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

fontWeight

텍스트의 굵기를 의미합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'regular'`

Enum Values Description
`'regular'`	텍스트 사용 규칙의 ‘regular’를 따릅니다.
`'bold'`	텍스트 사용 규칙의 ‘bold’를 따릅니다.

state

상태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

name*

Added in 1.2

form의 고유한 이름을 지정합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`Path<IFormValues>` (React-hook-form참고)
Default	-

onChange

Added in 1.4

데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.ChangeEvent<HTMLInputElement>) => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/05/24 : onChange prop추가 - 안은수
2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/19 : Property 기술방법 변경 - 박윤규
2021/12/28 : spec 내 text 사이즈, 컬러값 수정 - 김혜진
2021/11/17 : indeterminate 내용 삭제, prop 내 status 삭제, state 추가, style을 styleTheme로 수정 - 김혜진
2021/11/16 : icon에 대한 spec 추가 기술 - 김혜진
2021/11/11 : 행간에 대한 설명 추가 - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진
2021/09/29 : Spec 내용 추가 - 김혜진
2021/09/17 : Principle 내용 정리 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/08 : Principle 내용 추가 - 김혜진
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규
2021/09/07 : 최초 작성 - 김혜원