Components/Selection Controls

Selection Controls

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

Components

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

  • A
    A
  • B
    B
  • C
    C
A. CheckboxB. Radio ButtonC. Toggle Switch

Checkbox

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

Checkbox
Unchecked / Checked

Anatomy

Anatomy
1. Container2. Label

Variants

State

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

State
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
TypeUnchecked, CheckedUnchecked
StateDefault, Active, DisabledDefault

Usage Guidelines

Do : 컨트롤 버튼은 좌측 정렬이 디폴트

안정적인 시선의 흐름과 통일적인 레이아웃을 위해 체크박스와 라디오 버튼은 좌측 정렬이 디폴트입니다. 그러나 하나의 페이지로 사용할 경우 thumb zone 내 용이한 선택을 위해 우측 정렬을 할 수 있습니다.

Do : 컨트롤 버튼은 좌측 정렬이 디폴트
Do : 하나의 페이지로 사용시 우측 정렬 가능

안정적인 시선의 흐름과 통일적인 레이아웃을 위해 체크박스와 라디오 버튼은 좌측 정렬이 디폴트입니다. 그러나 하나의 페이지로 사용할 경우 thumb zone 내 용이한 선택을 위해 우측 정렬을 할 수 있습니다.

Do : 하나의 페이지로 사용시 우측 정렬 가능

Spec

Spacing
Spacing

컨트롤 아이콘과 레이블은 8의 패딩을 가지며, 선택 시 서로 간섭으로 인한 오류가 일어나지 않도록 리스트 내 12의 패딩을 갖습니다.

Text color
Text color

중요 텍스트는 볼드 처리하지 않고 색상을 Blue-500으로 변경해 사용합니다. 자주 사용하는 (필수/선택)의 문구도 괄호 안에 넣지 않고 색상을 변경해 사용합니다.

전체 동의 하단과 같이, 하나의 부모에 파생된 체크 박스들이 많을 경우 텍스트 컬러 색상을 Gray-700으로 변경해 복잡도를 낮출 수 있습니다.


Radio button

Radio button은 상호 간에 배타적인 두 개 이상의 옵션이 있어서 그중 하나만을 선택할 수 있을 경우 사용됩니다.
※디폴트로 하나는 무조건 선택되어 있어야 합니다.

Radio button
Unselected / Selected

Anatomy

Anatomy
1. Radio button2. Label

Variants

State

Radio button은 Selected / Unselected에 따라 Default, Active, Disabled로 분류됩니다.
Selection Controls 내에서의 Active는 hover 기능으로 간주되어 사용자에게 최종적으로 보여지는 형상은 Default와 Disabled 상태입니다.

State
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
TypeUnselected, SelectedUnselected
StateDefault, Active, DisabledDefault

Usage Guidelines

Do : 동등한 위계의 경우 동일한 색상 사용

한 페이지에서 동등한 레벨로서 라디오 버튼 옵션이 나열될 경우, 선택된 값과 선택되지 않은 값의 레이블 색상 차이를 두지 않습니다.

Do : 동등한 위계의 경우 동일한 색상 사용
Don’t : 동등한 위계의 경우 다른 색상 사용하지 않음

한 페이지에서 동등한 레벨로서 라디오 버튼 옵션이 나열될 경우, 선택된 값과 선택되지 않은 값의 레이블 색상 차이를 두지 않습니다.

Don’t : 동등한 위계의 경우 다른 색상 사용하지 않음
Do : 옵션이 7~8개 보다 많으면 드롭다운으로 사용

선택 항목이 7~8개 이상일 경우에 라디오 버튼을 사용하지 않고 드롭다운을 통해 선택 할 수 있도록 합니다.

Do : 옵션이 7~8개 보다 많으면 드롭다운으로 사용
Don’t : 많은 옵션이 있는 경우 라디오 버튼을 사용하지 않음

선택 항목이 7~8개 이상일 경우에 라디오 버튼을 사용하지 않고 드롭다운을 통해 선택 할 수 있도록 합니다.

Don’t : 많은 옵션이 있는 경우 라디오 버튼을 사용하지 않음
Do : 옵션 선택에 대한 강조가 필요할 경우, 라인값 gray-900을 사용

옵션 선택에 대한 강조가 필요한 경우, 라인값은 gray-900을 사용합니다.

Do : 옵션 선택에 대한 강조가 필요할 경우, 라인값 gray-900을 사용
Don’t : 옵션 선택에 대한 강조가 필요할 경우, 라인값 green-500을 사용하지 않음

옵션 선택에 대한 강조가 필요한 경우, 라인값은 green-500을 사용하지 않습니다.

Don’t : 옵션 선택에 대한 강조가 필요할 경우, 라인값 green-500을 사용하지 않음

Spec

Spacing
Spacing

컨트롤 아이콘과 레이블은 8의 패딩을 가지며, 선택 시 서로 간섭으로 인한 오류가 일어나지 않도록 리스트 내 12의 패딩을 갖습니다.

Sizes
Sizes

Radio button의 경우 20 x 20 사이즈가 디폴트입니다. 하지만 상황에 따라, 요소간의 계층 차이를 두기 위해 일부 Large* 사용을 허용합니다.


Toggle-switch

Toggle-switch는 상호간에 배타적인 옵션이 있어 각 선택에 따른 효과 전환이 필요할 경우 사용합니다.

Toggle switch
Off / On

Anatomy

Anatomy
1. Track2. Thumb

Variants

State

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

State
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
TypeOff, OnOff
StateDefault, Active, DisabledDefault

Spec

Spacing
Spacing

리스트내 우측에 활용되며, 좌측 끝 여백은 16px입니다.


담당자구경하@kykoo

이전글
Popovers
다음글
Sheets