Components

Checkbox

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.

개요

옵션 테이블

속성	값	기본값
size	medium, large	medium
shape	square, ghost	square
weight	default, stronger	default
state	enabled, pressed, disabled, selected, selected-pressed, selected-disabled, indeterminate, indeterminate-pressed, indeterminate-disabled	enabled
label	string

링크

React

Checkbox 컴포넌트를 React로 사용하는 방법을 설명합니다.

스펙

base

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

weight=default

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

weight=stronger

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

variant=square

상태	슬롯	속성	값
enabled	control	strokeColor	$color.stroke.control
		strokeWidth	1px
enabled, selected	control	color	$color.bg.brand-solid
	icon	color	$color.palette.static-white
pressed	control	color	$color.bg.layer-default-pressed
pressed, selected	control	color	$color.bg.brand-solid-pressed
	icon	color	$color.palette.static-white
disabled	control	color	$color.bg.disabled
		strokeColor	$color.stroke.neutral
	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
disabled, selected	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled

variant=ghost

상태	슬롯	속성	값
enabled	icon	color	$color.fg.placeholder
enabled, selected	icon	color	$color.fg.brand
pressed	control	color	$color.bg.layer-default-pressed
pressed, selected	control	color	$color.palette.carrot-200
disabled	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled
disabled, selected	label	color	$color.fg.disabled
	icon	color	$color.fg.disabled

size=medium

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

size=large

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x9
	label	fontSize	$font-size.t5
		lineHeight	$line-height.t5
	control	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

Callout

사용자의 주목을 끌어 중요한 정보를 강조하는 컴포넌트입니다.

Chip Tabs

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.