콤보 박스는 텍스트 필드와 드롭다운 리스트를 결합한 형태의 UI 컴포넌트다. 사용자는 주어진 목록에서 선택을 할 수 있으며, 동시에 텍스트 필드를 통해 직접 입력도 가능하다.
사용 예시
콤보 박스는 사용자가 표준 옵션 중 하나를 선택하거나, 필요에 따라 자신만의 값을 입력할 수 있어야 하는 상황에서 사용된다. 예를 들어, 주소 입력 필드에서 사용자는 주어진 도시 목록에서 선택을 할 수도 있고, 목록에 없는 도시의 이름을 직접 입력할 수도 있다.
주의점
- 콤보 박스는 옵션의 수가 적고, 사용자가 특정 값으로 입력할 가능성이 있을 때만 사용해야 한다. 옵션이 너무 많으면 사용자는 원하는 값을 찾는데 어려움을 겪을 수 있다.
- 자동 완성 기능을 함께 사용하여 사용자가 원하는 값을 빠르게 찾을 수 있도록 돕는다.
- 사용자가 임의의 값을 입력할 수 있다는 것이 명확하게 표시되어야 한다. 그렇지 않으면 사용자는 드롭다운 목록에서만 선택해야 한다고 오해할 수 있다.
참조
Codepen : https://codepen.io/drebrikov/pen/OJWdmK