Selection Controls
Components
Selection Control은 하나 이상 & 다중 선택이 가능한 Checkbox, 여러 선택 사항 중 하나만 선택이 가능한 Radio Button, 그리고 즉각적인 상황 변화를 일으켜 on/off 기능을 하는 Toggle Switch로 구성되어 있습니다. 각 쓰임새에 따라 적절한 Selection Control을 사용하시면 됩니다.
- A
- B
- C
Checkbox
Checkbox는 한 개 또는 다수의 독립적인 옵션들이 있어서 사용자의 의사에 따라 선택하지 않을 수 있고, 하나 또는 여러 개를 선택할 수 있을 때 사용됩니다. Checkbox가 한 개인 경우 기능을 on/off 하는 용도로 사용할 수 있습니다.
Anatomy
Variants
State
Checkbox는 Checked / Unchecked에 따라 Default, Active, Disabled로 분류됩니다.
셀렉션 컨트롤 내에서의 Active는 hover 기능으로 간주되어 사용자에게 최종적으로 보여지는 형상은 Default와 Disabled 상태입니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Unchecked, Checked | Unchecked |
| State | Default, Active, Disabled | Default |
Usage Guidelines
Do : 컨트롤 버튼은 좌측 정렬이 디폴트
안정적인 시선의 흐름과 통일적인 레이아웃을 위해 체크박스와 라디오 버튼은 좌측 정렬이 디폴트입니다. 그러나 하나의 페이지로 사용할 경우 thumb zone 내 용이한 선택을 위해 우측 정렬을 할 수 있습니다.
Do : 하나의 페이지로 사용시 우측 정렬 가능
안정적인 시선의 흐름과 통일적인 레이아웃을 위해 체크박스와 라디오 버튼은 좌측 정렬이 디폴트입니다. 그러나 하나의 페이지로 사용할 경우 thumb zone 내 용이한 선택을 위해 우측 정렬을 할 수 있습니다.
Spec
Spacing
컨트롤 아이콘과 레이블은 8의 패딩을 가지며, 선택 시 서로 간섭으로 인한 오류가 일어나지 않도록 리스트 내 12의 패딩을 갖습니다.
Text color
중요 텍스트는 볼드 처리하지 않고 색상을 Blue-500으로 변경해 사용합니다. 자주 사용하는 (필수/선택)의 문구도 괄호 안에 넣지 않고 색상을 변경해 사용합니다.
전체 동의 하단과 같이, 하나의 부모에 파생된 체크 박스들이 많을 경우 텍스트 컬러 색상을 Gray-700으로 변경해 복잡도를 낮출 수 있습니다.
Radio button
Radio button은 상호 간에 배타적인 두 개 이상의 옵션이 있어서 그중 하나만을 선택할 수 있을 경우 사용됩니다.
※디폴트로 하나는 무조건 선택되어 있어야 합니다.
Anatomy
Variants
State
Radio button은 Selected / Unselected에 따라 Default, Active, Disabled로 분류됩니다.
Selection Controls 내에서의 Active는 hover 기능으로 간주되어 사용자에게 최종적으로 보여지는 형상은 Default와 Disabled 상태입니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Unselected, Selected | Unselected |
| State | Default, Active, Disabled | Default |
Usage Guidelines
Do : 동등한 위계의 경우 동일한 색상 사용
한 페이지에서 동등한 레벨로서 라디오 버튼 옵션이 나열될 경우, 선택된 값과 선택되지 않은 값의 레이블 색상 차이를 두지 않습니다.
Don’t : 동등한 위계의 경우 다른 색상 사용하지 않음
한 페이지에서 동등한 레벨로서 라디오 버튼 옵션이 나열될 경우, 선택된 값과 선택되지 않은 값의 레이블 색상 차이를 두지 않습니다.
Do : 옵션이 7~8개 보다 많으면 드롭다운으로 사용
선택 항목이 7~8개 이상일 경우에 라디오 버튼을 사용하지 않고 드롭다운을 통해 선택 할 수 있도록 합니다.
Don’t : 많은 옵션이 있는 경우 라디오 버튼을 사용하지 않음
선택 항목이 7~8개 이상일 경우에 라디오 버튼을 사용하지 않고 드롭다운을 통해 선택 할 수 있도록 합니다.
Do : 옵션 선택에 대한 강조가 필요할 경우, 라인값 gray-900을 사용
옵션 선택에 대한 강조가 필요한 경우, 라인값은 gray-900을 사용합니다.
Don’t : 옵션 선택에 대한 강조가 필요할 경우, 라인값 green-500을 사용하지 않음
옵션 선택에 대한 강조가 필요한 경우, 라인값은 green-500을 사용하지 않습니다.
Spec
Spacing
컨트롤 아이콘과 레이블은 8의 패딩을 가지며, 선택 시 서로 간섭으로 인한 오류가 일어나지 않도록 리스트 내 12의 패딩을 갖습니다.
Sizes
Radio button의 경우 20 x 20 사이즈가 디폴트입니다. 하지만 상황에 따라, 요소간의 계층 차이를 두기 위해 일부 Large* 사용을 허용합니다.
Toggle-switch
Toggle-switch는 상호간에 배타적인 옵션이 있어 각 선택에 따른 효과 전환이 필요할 경우 사용합니다.
Anatomy
Variants
State
Toggle-switch는 On / Off에 따라 Default, Active, Disabled로 분류됩니다.
셀렉션 컨트롤 내에서의 Active는 hover 기능으로 간주되어 사용자에게 최종적으로 보여지는 형상은 Default와 Disabled 상태입니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Off, On | Off |
| State | Default, Active, Disabled | Default |
Spec
Spacing
리스트내 우측에 활용되며, 좌측 끝 여백은 16px입니다.
