Select Control
여러 옵션 중 하나를 선택할 수 있도록 제공하는 선택 입력 요소입니다.
목록 형태의 옵션을 펼쳐 원하는 항목을 선택할 때 사용합니다.
컴포넌트 명세 (Component Specification)
Anatomy
selectControl
기본 기능
여러 옵션 중 하나를 선택할 때 사용되는 요소
시각 옵션
해당 없음
상태
default
active
내부 구성
icon
text
사이즈 가이드 (Size Guide )
모든 select control은 20px입니다.
중앙에 아이콘이 위치되고, 좌우 위아래 2px의 간격을 두고 사용됩니다.
분류 (Variant)
Select Control의 다양한 분류 기준입니다.
Check 1
가장 많이 사용되는 체크 형식의 다중 선택의 Select Control입니다.
Check 2
흰색 배경으로 Active 상태를 보여주는 다중 선택의 Select Control입니다.
Minus
Minus 아이콘이 포함된 Select Control입니다.
Radio
단일 선택을 할 때 사용되는 라디오 형식의 Select Control입니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Select Control이 배치되고 활용되는 패턴입니다.
Fill 좌측 텍스트 (Left Side Text)
좌측에 텍스트 타이틀이 있을 경우, 텍스트는 Fill 처리되어
Select Control의 좌측에 사용됩니다.
Hug 우측 텍스트 (Right Side Text)
우측에 텍스트가 있을 경우, 텍스트는 가변의 Hug로 처리되어
Select Control의 우측에 사용됩니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.