Select Box

Anatomy

• root
• content
• label
• description
• checkbox control
• checkbox icon
• radio control
• radio icon

Options

Type

Select Box는 두 가지 타입으로 제공됩니다.

Checkbox

[TODO: 체크박스 형태의 Select Box 이미지. 사각형 컨트롤이 있고 선택 시 체크 아이콘이 표시됨]

다수의 항목을 동시에 선택할 수 있는 경우에 사용합니다. 체크박스 컨트롤은 사각형 형태로 표시됩니다.

Radio

[TODO: 라디오 버튼 형태의 Select Box 이미지. 원형 컨트롤이 있고 선택 시 내부에 원형 아이콘이 표시됨]

여러 항목 중 하나만 선택해야 하는 경우에 사용합니다. 라디오 컨트롤은 원형으로 표시됩니다.

Label

[TODO: label만 있는 간단한 Select Box 이미지]

선택 항목을 나타내는 기본 텍스트입니다. 모든 Select Box에는 label이 포함되어야 합니다.

Description (Optional)

[TODO: label과 description이 모두 포함된 Select Box 이미지]

선택 항목에 대한 부가 설명을 제공합니다. Label과 함께 사용자에게 추가 정보가 필요한 경우에 사용합니다.

Behaviors

Overflow 처리

[TODO: 너무 긴 텍스트가 있는 경우 처리 방법을 보여주는 이미지]

Label 혹은 Description이 너무 긴 경우 줄바꿈 처리됩니다. 이때, 줄바꿈은 단어 단위로 이루어집니다. Control과의 간격이 유지되어야 하는 것에 유의하세요. (root.gap)

Usage Guidelines

명확한 의도 전달

[TODO: 명확한 label과 description을 가진 Select Box 예시 이미지]

사용자가 선택의 의미와 결과를 명확히 이해할 수 있도록 간결하고 명확한 label을 사용하세요. 필요한 경우 description을 추가하여 상세 정보를 제공하세요.

배치 순서

중요도나 사용 빈도에 따라 순서를 배치하세요. 사용자가 쉽게 인지하고 선택할 수 있도록 논리적인 순서를 유지하세요.

적절한 타입 선택

[TODO: Checkbox와 Radio 타입이 적절하게 사용된 예시 이미지]

요구사항에 맞는 적절한 타입을 선택하세요.

• 다중 선택이 필요한 경우 Checkbox 타입을 사용하세요.
• 단일 선택만 허용되는 경우 Radio 타입을 사용하세요.

기본값 제공

[TODO: 기본값이 선택된 Select Box 그룹 이미지]

사용자의 일반적인 선택이나 추천 옵션이 있는 경우, 해당 항목을 기본적으로 선택된 상태로 제공하는 것이 좋습니다. 단, 중요한 결정이나 동의가 필요한 경우에는 기본값을 피하세요.

Select Box vs. Checkbox & Radio

Select Box는 중요한 선택 옵션을 강조할 때 사용합니다.

• 사용자의 주의가 필요한 중요한 선택지
• 선택의 결과나 영향을 자세히 설명해야 할 때
• 시각적으로 더 큰 클릭 영역이 필요할 때

Checkbox와 Radio는 간단한 선택이 필요하며, 다수의 옵션을 빠르게 처리해야 할 때 사용합니다.

• 부가 설명 없이 라벨만으로 충분한 경우
• 여러 옵션을 한 눈에 보고 빠르게 선택해야 하는 경우
• 공간 효율성이 중요한 경우

개요

옵션 테이블

링크

스펙

base

상태	슬롯	속성	값
enabled	root	paddingX	$dimension.x4
		paddingY	$dimension.x5
		gap	$dimension.x2_5
		strokeWidth	1px
		strokeColor	$color.stroke.neutral
		cornerRadius	$radius.r3
	content	gap	$dimension.x0_5
	label	color	$color.fg.neutral
		fontWeight	$font-weight.bold
		fontSize	$font-size.t5
		lineHeight	$line-height.t5
	description	color	$color.fg.neutral-muted
		fontWeight	$font-weight.regular
		fontSize	$font-size.t4
		lineHeight	$line-height.t4
	checkboxControl	size	$dimension.x6
		color	$color.bg.layer-default
		strokeWidth	1px
		strokeColor	$color.stroke.control
		cornerRadius	$radius.r1
	checkboxIcon	size	$dimension.x3_5
	radioControl	size	$dimension.x6
		color	$color.bg.layer-default
		strokeWidth	1px
		strokeColor	$color.stroke.control
		cornerRadius	$radius.full
	radioIcon	size	$dimension.x2_5
		cornerRadius	$radius.full
enabled, pressed	root	color	$color.bg.layer-default-pressed
	checkboxControl	color	$color.bg.layer-default-pressed
	radioControl	color	$color.bg.layer-default-pressed
enabled, selected	root	color	$color.bg.neutral-weak
		strokeColor	$color.stroke.control
	checkboxControl	color	$color.bg.brand-solid
		strokeWidth	0
	checkboxIcon	color	$color.palette.static-white
	radioControl	color	$color.bg.brand-solid
		strokeWidth	0
	radioIcon	color	$color.palette.static-white
enabled, selected, pressed	root	color	$color.bg.neutral-weak-pressed
	checkboxControl	color	$color.bg.brand-solid-pressed
	radioControl	color	$color.bg.brand-solid-pressed