Design System

Selection Controls

셀렉션 컨트롤(Selection Controls)은 사용자가 선택 옵션들을 제어할 수 있도록 돕는 컴포넌트입니다. 다중선택을 위한 체크 박스, 다수의 옵션 중 하나의 선택을 위한 라디오 버튼, 효과 전환을 위한 토글 스위치로 나뉩니다.

Components

Selection Control은 하나 이상 & 다중 선택이 가능한 Checkbox, 여러 선택 사항 중 하나만 선택이 가능한 Radio Button, 그리고 즉각적인 상황 변화를 일으켜 on/off 기능을 하는 Toggle Switch로 구성되어 있습니다. 각 쓰임새에 따라 적절한 Selection Control을 사용하시면 됩니다.

Selection Control Group

Selection Control의 경우 단일하게 사용되어 지기도 하지만 하나의 목적의 Group 내에서 같은 종류의 여러개로 구성되어 묶여 사용되어지기도 합니다. 해당 묶음 내에서 여러개의 Selection Control 은 서로 상호 베타적인관계 혹은 독립적인 관계를 형성가능 합니다.

Checkboxes Group

Checkboxes Group의 경우 단일 혹은 다중선택 가능하도록 하는 요소들을 묶어 선택지로 제공하고자 할때 사용되어지는 것이 특징입니다. 주로 다중 필터의 목적을 사용 됩니다.

(e.g. Statistics and Defects Side Filter, Task Settings )

Radio Buttons Group

Radio Buttons Group의 경우 여러 선택지 중 하나의 선택만 가능할때 사용되어지는 것이 특징입니다. 현재 Zoomable Wind 내에서 Radio Buttons Group으로 사용되어 지는 부분은 존재하지 않습니다.

Toggle-Switches Group

Toggle-Switches의 경우 하나의 Component가 Checked / Unchecked (On/Off)의 역할을 이미 수행하고 있으며, 단일개로 사용되어 지는 것이 보편적인 특징이나 Group으로 사용되어지는 경우는 유사한 역할을 수행하는 각각의 Label을 포함한 Toggle-Switches를 함께 배치하여 사용되어지는 것이 특징입니다.

(e.g. Management Settings, Table Settings )

Selection Control

Checkboxes Group

Radio Button

Toggle-Switch

Options

Multiple

Single

Selection Case

0 - all (Multiple)

1 (Single)

2 (On / Off)

Default Option

All Unselected

1 (Single)

Checked (On)

Relation btw Other Options

Independent of Each Other
(각각의 요소들이 독립적인 관계)

Mutually Exclusive
(다른 요소들과 상호베타적인 관계)

Independent of Each Other
(각각의 요소들이 독립적인 관계)

Options

CheckboxMultiple

RadioMultiple

ToggleSingle

Selection Case

Checkbox0 - all (Multiple)

Radio1 (Single)

Toggle2 (On / Off)

Default Option

CheckboxAll Unselected

Radio1 (Single)

ToggleChecked (On)

Relation

CheckboxIndependent (독립적)

RadioMutually Exclusive (상호베타적)

ToggleIndependent (독립적)

Checkbox

Checkbox는 한 개 또는 다수의 독립적인 옵션들이 있어서 사용자의 의사에 따라 선택하지 않을 수 있고, 하나 또는 여러 개를 선택할 수 있을 때 사용됩니다. Checkbox가 한 개인 경우 기능을 on/off 하는 용도로 사용할 수 있습니다.

Unchecked / Checked

Anatomy

1. Container
2. Label

Varients

State

Checkbox는 Checked / Unchecked에 따라 Default, Active, Disabled로 분류됩니다. 셀렉션 컨트롤 내에서의 Active는 hover 기능으로 간주되어 사용자에게 최종적으로 보여지는 형상은 Default와 Disabled 상태입니다.

Size

Checkbox의 경우 Large, Medium, Small, Xsmall 4가지 사이즈가 있으며 16x16 사이즈가 디폴트 입니다. 상황에 따라, 요소간의 계층 차이를 두기 위해 각기 다른 사이즈를 사용할수 있습니다.

Table of Figma Properties

Property

Values

Default Value

Type

Unchecked, Checked

Unchecked

State

Default, Active, Disabled

Default

Spacing

체크박스와 레이블은 Large, Medium, sMedium은 8의 마진값을 가지며 Small은 4px의 마진값을 가집니다. 선택 시 서로 간섭으로 인한 오류가 일어나지 않도록 리스트 내 12px의 패딩을 갖습니다. 또한 일반적으로 Checkbox의 경우 Text와 함께 쓰여지는 경우 Check 아이콘이 왼쪽에 배치되지만 레이아웃 및 공간적인 이유로 오른쪽 배치또한 가능합니다.

Usecase

Side Panel Filter (Statistics, Defects)

Data Table에서 사용자가 원하는 데이터를 보기 위한 Filter의 역할로서 사용되어 집니다.

Task Settings Farm Selection

동일한 특성을 가진 항목을 다중으로 선택 가능하도록 사용 되어 집니다.

Sync User name Data

Data Sync에 대한 유무를 선택 하도록 단일 하게 사용되어 집니다.

Multiple Select Option

다중으로 여러개가 함께 표출되는 Checkbox Group에서 단일 혹은 다중으로 모두 Selection (Checked)로 표출 가능합니다.

Right and Left Arrangement

일반적으로 다중으로 Item을 그룹화 하여 사용할때 Checkbox와 Text Label의 정렬에 있어서 Checkbox를 좌측에 두어 Item List의 Text 배열을 동일하게 하여 사용 되어 집니다. Checkbox를 우측에 두어 정렬하는 경우는 Item List로서 사용되는 경우가 아닌 데이터를 불러오는 경우와 같이 Opitional 한 Filter로서 단일하게 사용 되어 집니다.

Indeterminate State

Indeterminate State의 경우 Checkbox의 하위 항목에 대한 값이 Unchecked와 Checked가 함께 존재할 시에 사용이 되어지며, 상위항목에서의 Checked State는 모든 하위 항목이 Checked된 경우, Unchecked의 경우 모든 하위 항목이 Unchecked일 경우 사용되어 집니다.