콤보박스는 사용자가 목록 중에서 값을 선택하거나 또는 직접 값을 입력할 수 있도록 제공하는 드롭다운 형태의 구성요소 입니다.
Usage
제공하는 옵션 목록이 길 경우에 사용합니다.
•
사용자의 입력을 통해 자동완성기능을 지원하는 경우에 사용합니다.
•
사용자의 입력을 허용하지 않고 옵션만 선택하게 하는 경우에는 select를 사용합니다.
Anatomy
1.
Placeholder text
2.
포커스 후 입력을 시작하면 해당 입력 텍스트에 대한 자동완성 목록이 드롭다운 형태로 열립니다.
3.
마우스 오버 스타일을 사용합니다.
Guidelines
•
최초 포커스 시, 불러올 목록이 긴 경우에는 사용자 입력을 유도하는 메시지를 제공합니다.
•
국가, 지역, 인물 색인 등 제공 옵션이 아주 많을 경우에만 사용합니다.
•
제공 옵션을 그룹화하여 표시하는 경우, 각 그룹의 레이블은 시각적으로 명확한 구분을 두어 사용자의 혼란을 방지합니다.
Accessibility
•
WAI APG Combobox pattern에 따라 구현하여 사용합니다.
