셀렉트는 사용자가 1개 또는 복수의 옵션을 선택하도록 목록을 드롭다운 형태로 제공하는 구성요소 입니다.
Usage
사용자가 선택할 수 있는 옵션 목록을 제공할 때 사용합니다.
•
선택 가능한 옵션이 4~5개 이상일 때 사용합니다.
•
모바일에서는 별도 스타일을 적용하지 않고 시스템OS에서 제공하는 형태로 사용합니다.
Anatomy
1.
레이블을 표시합니다.
2.
셀렉트 폼을 클릭하면 드롭다운 형태의 옵션 목록이 열립니다.
3.
기본으로 설정한 옵션이 없는 경우에는 플레이스홀더를 표시할 수 있습니다.
4.
셀렉트 요소임을 사용자가 바로 인지할 수 있도록 셀렉트 기표를 표시합니다.
5.
에러 메시지를 표시합니다.
6.
옵션 목록이 드롭다운 형태로 열립니다.
기본으로 설정한 옵션 또는 사용자가 선택한 옵션이 없고 플레이스홀더가 표시된 상태에서는 셀렉트 폼 하단에 위치하여 열립니다.
7.
기본으로 설정한 옵션 또는 사용자가 선택한 옵션이 있는 경우에는 구분이 되도록 스타일을 적용합니다.
8.
그룹화하여 제공할 경우에 그룹명을 표시합니다. 그룹명은 선택할 수 없습니다.
9.
마우스 오버 스타일을 적용합니다. 선택한 옵션을 표시하는 스타일(7번)과는 구분이 되어야 합니다.
10.
목록이 길 경우, 스크롤을 표시합니다.
11.
기본으로 설정한 옵션 또는 사용자가 선택한 옵션이 있는 경우에는 해당 옵션명을 표시합니다.
12.
옵션명을 표시하고 있는 상태에서 옵션 목록을 열면 셀렉트 폼 위로 덮혀 열립니다.
Variants
Single select
한개의 옵션만 선택할 수 있는 일반적인 셀렉트입니다.
Multi select
한번에 여러 개의 옵션을 선택할 수 있는 셀렉트입니다.
전체 선택, 해제 등 편의성 컨트롤을 함께 제공합니다.
Cascading select
계층화 되어 있는 옵션을 순차적으로 연속하여 선택할 때 사용하는 셀렉트입니다.
모달창을 통해 전용 폼을 구성하여 사용합니다.
Appearance
Guidelines
•
4~5개 이상의 옵션을 제공할 경우에 사용합니다. 이보다 적은 경우에는 라디오 버튼 그룹 또는 체크박스 그룹 등으로 구성하여 제공합니다.
•
가급적 플레이스홀더 대신 기본 옵션을 설정하는 것을 권장합니다.
•
기본 옵션을 설정할 때는 랜덤으로 선택되게 설정할 수 없습니다. 권장하는 옵션 하나를 지정하여 기본 옵션으로 제공합니다.
•
싱글 셀렉트의 경우 1,024px 이하 화면에서는 브라우저 또는 시스템OS가 제공하는 폼을 사용합니다.
•
멀티 셀렉트는 옵션 목록을 체크박스 그룹으로 구성하여 사용합니다.
