Control Chip

Control Chip은 사용자가 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다.

Control Chip은 사용자가 필터링, 선택 또는 전환 작업을 수행할 수 있도록 지원하는 UI 요소입니다.

Control Chip은 Checkbox나 Radio와 유사한 역할을 하며, 선택 상태를 유지하거나 변경할 수 있습니다. 또한, Filter 역할로 활용될 경우, 특정 카테고리나 조건을 활성화하거나 비활성화하는 기능을 제공합니다. Control Chip은 라벨과 함께 명확한 상호작용 피드백을 제공하며, 사용자에게 현재 상태와 가능한 액션을 직관적으로 전달하도록 설계되어야 합니다.

Properties

Size

Control Chip은 small과 medium 두 가지 크기를 제공합니다. 일반적으로 medium 크기가 가장 많이 사용됩니다. 좁은 영역에서 여백을 활용해야하는 경우, small 을 사용합니다.

Selected

Control Chip은 enabled와 unselected 중 하나의 상태를 가집니다. 다중선택과 단일선택 동작이 가능합니다.

Layout

Control Chip은 라벨과 아이콘의 조합으로 구성되며, 아이콘은 버튼의 목적을 시각적으로 강조하거나 동작을 보조합니다. 라벨 앞, 뒤, 양쪽 또는 아이콘만으로 구성할 수 있어 상황에 맞게 유연하게 활용됩니다. 다만, 라벨 가독성을 해치지않도록 아이콘은 제한적으로 사용하는 것을 권장합니다.

Icon (Optional)

아이콘은 버튼의 동작을 시각적으로 표현하고 강조를 하는 데 도움을 줍니다. 라벨의 앞, 뒤에 위치하여 사용할 수 있으며, Prefix는 주로 액션의 의미를 보조하는 역할, Suffix 는 Chevron 과 같이 동작을 보조하는 역할의 아이콘을 사용합니다.

States

Control Chip은 상호작용 상태를 나타내기 위해 State Layer를 활용합니다. 사용 가능한 상태는 enabled, pressed (Hover), disabled, Loading 이며, 주요 토큰에는 각 State 에 맞는 시멘틱 토큰이 존재합니다.
자세한 내용은 Color Palette 를 참조해주세요.

Best Practice

Control Chip을 필터 용도로 사용할 때는 여러 개의 옵션을 선택할 수 있는 방식으로 구성됩니다. 기본 상태는 모두 선택되지 않은 상태이며, 사용자는 Chip 을 클릭해 Dropdown 혹은 BottomSheet 를 통해 원하는 옵션을 선택할 수 있습니다. 옵션이 선택된 경우 Selected 상태로 변경됩니다.

Control Chip은 단일 선택 또는 다중 선택이 가능한 방식으로 구성할 수 있으며, 각각의 경우에 따라 적절한 사용 방식이 있습니다. 단일 선택의 경우, Radio 버튼과 같이 한 번에 하나의 옵션만 선택할 수 있습니다. Chip은 항상 그룹으로 구성되어야 하며, 명확한 선택 상태와 직관적인 상호작용을 통해 사용자가 쉽게 원하는 조건을 선택할 수 있어야 합니다.

Control Chip vs Radio Group / Checkbox

Control Chip은 기능적으로는 Radio 버튼이나 Checkbox와 유사하지만, UX 관점에서는 몇 가지 차이점이 있습니다. Radio와 Checkbox는 선택 후 별도의 확인 동작이 필요한 경우가 많아 설정값을 지정하는 용도로 자주 사용되는 반면, Control Chip은 선택 즉시 콘텐츠에 변화가 반영되는 경우가 많아, 빠른 피드백과 즉각적인 반응이 요구되는 인터페이스에 더 적합합니다.

또한, Radio와 Checkbox는 선택 후 별도의 확인 동작이 필요한 경우가 많아 설정값을 지정하는 용도로 자주 사용됩니다. 반면 Control Chip은 선택 즉시 콘텐츠에 변화가 반영되는 경우가 많아, 빠른 피드백과 즉각적인 반응이 요구되는 인터페이스에 더 적합합니다.

Action Chip의 역할로 사용하지 않습니다.Close 아이콘을 활용한 닫기 동작이 필요한 경우, Action Chip을 사용합니다. Control Chip은 Toggle 되는 동작을 통해 단일/다중선택 기능이나 콘텐츠를 필터링하는 역할로 사용합니다.

라벨은 명확하고 간결하게 작성합니다.사용자가 빠르게 이해하고 동작을 수행할 수 있도록 불필요한 단어 사용을 지양합니다. Label은 1줄을 초과할 수 없습니다.

개요

옵션 테이블

속성	값	기본값
size	medium, small	medium
layout	with text, icon only	with text
selected	true, false	false
disabled	true, false	false
count	number
prefix icon	icon
suffix icon	icon

base

상태	슬롯	속성	값
enabled	root	strokeColor	$color.stroke.neutral
		strokeWidth	1px
		cornerRadius	$radius.full
	label	color	$color.fg.neutral
		fontWeight	$font-weight.medium
	prefixIcon	color	$color.fg.neutral
	suffixIcon	color	$color.fg.neutral-subtle
	icon	color	$color.fg.neutral
	count	color	$color.fg.neutral-muted
		fontWeight	$font-weight.medium
pressed	root	color	$color.bg.layer-default-pressed
selected	root	strokeWidth	0
		color	$color.bg.neutral-solid-muted
	label	color	$color.palette.static-white
		fontWeight	$font-weight.bold
	prefixIcon	color	$color.palette.static-white
	suffixIcon	color	$color.palette.static-white
	icon	color	$color.palette.static-white
	count	color	$color.palette.static-white-alpha-800
selected, pressed	root	color	$color.bg.neutral-solid-muted-pressed
disabled	root	color	$color.bg.disabled
	label	color	$color.fg.disabled
	prefixIcon	color	$color.fg.disabled
	suffixIcon	color	$color.fg.disabled
	icon	color	$color.fg.disabled
	count	color	$color.fg.disabled

size=small

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x8
		paddingY	$dimension.x1_5
		gap	$dimension.x1
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
	suffixIcon	size	$dimension.x3_5
	count	fontSize	$font-size.t4

size=medium

상태	슬롯	속성	값
enabled	root	minHeight	$dimension.x9
		paddingY	$dimension.x2
		gap	$dimension.x1
	label	fontSize	$font-size.t4
		lineHeight	$line-height.t4
	prefixIcon	size	$dimension.x4
	suffixIcon	size	$dimension.x3_5
	count	fontSize	$font-size.t4

size=small, layout=withText

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x3

size=small, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x8
	icon	size	$dimension.x4

size=medium, layout=withText

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x3_5

size=medium, layout=iconOnly

상태	슬롯	속성	값
enabled	root	minWidth	$dimension.x9
	icon	size	$dimension.x4