Select Control
여러 옵션 중 하나를 선택할 수 있도록 제공하는 선택 입력 요소입니다.
목록 형태의 옵션을 펼쳐 원하는 항목을 선택할 때 사용합니다.
컴포넌트 명세 (Component Specification)
분류 (Variant)
하단에 라인으로 구분된(line) 인풋과 전체 영역이 막힌(Solid) 인풋으로 분류됩니다.
사이즈 가이드 (Size Guide )
input/line/large의 경우, Medium(32px), Large(36px) 구분되어 사용됩니다.
input/solid의 경우, Small(36px), Medium(46px), Large(78px) 구분되어 사용됩니다.
상태 (State)
Input은 Disabled, Active, Error 상태값을 가집니다.
Use Case (사용 예시)
실제 서비스 화면에서 Input이 배치되고 활용되는 패턴입니다.
Button
“게시판 > 댓글"의 경우 우측에 댓글을 달 수 있는 버튼이 생성됩니다.
Scroll
Solid 인풋의 최대 높이는 78px입니다. 78px을 초과하는 경우 내부에
스크롤이 생성되며, 높이는 더 이상 확장되지 않습니다.
Icon
우측 혹은 좌측에 각 용도에 맞게 16px의 아이콘이 사용됩니다.
Unit
우측에 용도에 맞게 단위가 사용됩니다.
Select Control
단일 선택을 할 때 사용되는 라디오 형식의 Select Control입니다.
Title
input/line/medium의 경우, title은 상단에 위치합니다.
input/line/large의 경우, title은 좌측에 위치합니다.
Label
라벨이 반복될 때 너비값이 243px을 넘으면 밑으로 내려갑니다.
라벨이 포함된 영역의 높이값은 가변적이며, 가로 4px 세로 6px의 간격으로 라벨이 나열됩니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
