Checkbox

Anatomy

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

Properties

Size, Weight

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

Tone

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

Brand 컬러는 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다.

Shape

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

State

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

Guidelines

Checkbox touch target

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

Checkbox group 사용하기

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

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

Shape 결정하기

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

Checkbox vs. Switch

Checkbox와 Switch는 사용자의 선택 여부를 표시하는 컴포넌트입니다.

Specification

Checkbox

base

상태	슬롯	속성	값
enabled	label	color	$color.fg.neutral
	root	gap	$dimension.x2
disabled	label	color	$color.fg.disabled

weight=regular

상태	슬롯	속성	값
enabled	label	fontWeight	$font-weight.regular

weight=bold

상태	슬롯	속성	값
enabled	label	fontWeight	$font-weight.bold

size=medium

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x8
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4

size=large

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x9
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5

Checkmark

base

상태	슬롯	속성	값
enabled	root	colorDuration	$duration.color-transition
		colorTimingFunction	$timing-function.easing

variant=square

상태	슬롯	속성	값
enabled	root	strokeWidth	1px
		strokeColor	$color.stroke.neutral-weak
pressed	root	color	$color.bg.transparent-pressed
enabled, selected	root	strokeWidth	0px
		strokeColor	#00000000
disabled	root	color	$color.bg.disabled
		strokeColor	$color.stroke.neutral-muted
	icon	color	$color.fg.disabled
disabled, selected	icon	color	$color.fg.disabled

variant=square, tone=brand

상태	슬롯	속성	값
enabled, selected	root	color	$color.bg.brand-solid
	icon	color	$color.palette.static-white
pressed, selected	root	color	$color.bg.brand-solid-pressed

variant=square, tone=neutral

상태	슬롯	속성	값
enabled, selected	root	color	$color.bg.neutral-inverted
	icon	color	$color.fg.neutral-inverted
pressed, selected	root	color	$color.bg.neutral-inverted-pressed

variant=ghost

상태	슬롯	속성	값
enabled	icon	color	$color.fg.placeholder
pressed	root	color	$color.bg.transparent-pressed
disabled	icon	color	$color.fg.disabled
disabled, selected	icon	color	$color.fg.disabled

variant=ghost, tone=brand

상태	슬롯	속성	값
enabled, selected	icon	color	$color.fg.brand
pressed, selected	root	color	$color.palette.carrot-200

variant=ghost, tone=neutral

상태	슬롯	속성	값
enabled, selected	icon	color	$color.fg.neutral-muted
pressed, selected	root	color	$color.palette.gray-200

size=medium

상태	슬롯	속성	값
enabled	root	size	$dimension.x5
		cornerRadius	$radius.r1

size=large

상태	슬롯	속성	값
enabled	root	size	$dimension.x6
		cornerRadius	$radius.r1

variant=square, size=medium

상태	슬롯	속성	값
enabled	icon	size	12px

variant=square, size=large

상태	슬롯	속성	값
enabled	icon	size	14px

variant=ghost, size=medium

상태	슬롯	속성	값
enabled	icon	size	14px

variant=ghost, size=large

상태	슬롯	속성	값
enabled	icon	size	18px