Dropdown
Accordion
Radio&Check
여러 개의 선택지 중 단일 혹은 복수 개를 선택해야하는 경우 사용되는 컴퍼넌트입니다.
보통 사용자의 정보를 얻거나, 사용자에게 특정 정보에 대한 확실한 인식이 필요할 경우에 사용됩니다.
Architecture
기본 구조와 함께 각 사용성에 따라 총 3가지로 구분됩니다.
Component Name
Check Component의 기본을 이루는 구조에 대한 설명입니다.
*Sheet Compnent를 활용한 예시 화면입니다.
약관 동의
필수 동의 전체 동의
(필수) 제3자 정보제공에 동의합니다
(선택) 마케팅 정보 제공에 동의합니다
2
3
1
1
Check Icon
2
Text
3
More Icon (Optional)
Type & Hierarchy
아래의 종류와 위계에 대한 구조를 가집니다.
Radio (Primary)
여러 개의 선택지 중 한 가지(단일)만 선택할 때 사용됩니다.
단독으로 사용될 수 없으며, Check 컴퍼넌트와는 혼용하여 사용할 수 없습니다.
*Sheet Compnent를 활용한 예시 화면입니다.
Label Name
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check Item Text Here
Left Radio
Label Name
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check Item Text Here
Right Radio
Check (Base)
여러 개의 선택지 중 복수 선택을 할 때 사용됩니다.
Primary 상태보다는 하위 위계를 가지기 때문에, Primary 내 Multi-Select이 필요할 경우에 사용됩니다.
Primary와 다르게 단독으로 사용되지 못하고 같은 Component와 함께 사용해야하니다.
*Sheet Compnent를 활용한 예시 화면입니다.
Label Name
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check (Primary)
여러 개의 선택지 중 단일 선택 또는 복수 선택을 할 때 사용됩니다.
단독으로 사용될 수 있으며, 내부에 또 다른 Multi-Select이 있을 수 있어 부분 선택에 대한 상태값을 가질 수 있습니다.
*Sheet Compnent를 활용한 예시 화면입니다.
Label Name
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check Item Text Here
Focus (Primaary)
여러 개의 선택지 중 단일 선택 또는 복수 선택을 할 때 사용됩니다.
단독으로 사용될 수 있습니다. Primary와 다르게 선택 영역이 왼쪽과 오른쪽으로 구분될 수 있습니다.
*Sheet Compnent를 활용한 예시 화면입니다.
Label Name
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check Item Text Here
Left Radio
Label Name
Check Item Text Here
Check Item Text Here
Check Item Text Here
Check Item Text Here
Right Radio