Combo box, Input과 Dropdown 조합, Windows 3.0

한 줄로

텍스트 입력과 드롭다운 목록이 결합된 컴포넌트입니다. 사용자가 직접 입력하거나 목록에서 선택할 수 있습니다. Windows 3.0(1990)에서 표준화됐습니다.

어디서 왔나

"Combo"는 combination(조합)의 줄임입니다. Combo box는 두 입력 방식의 조합을 뜻합니다.

Windows 3.0이 처음으로 시스템 컴포넌트로 도입했습니다. 이전까지 텍스트 필드와 드롭다운이 따로 있던 걸 합친 것입니다. 사용자는 옵션을 모르면 입력하고, 목록에서 찾고 싶으면 클릭합니다.

모던 진화

Autocomplete (자동완성): 사용자가 입력하면 일치하는 옵션을 표시합니다.
Searchable dropdown: 옵션이 많을 때 검색합니다.
Tag input: 여러 값을 칩(chip)으로 추가합니다.

대표 사례는 다음과 같습니다.

Slack의 멘션: @를 입력하면 사용자 목록이 뜹니다.
GitHub의 라벨 선택: 검색과 다중 선택이 됩니다.
Linear의 이슈 할당: 검색과 단일 선택이 됩니다.

접근성

WAI-ARIA Combo box 패턴이 표준화돼 있습니다. 키보드로 탐색과 선택이 가능해야 하고, 스크린리더가 옵션 수와 선택 상태를 안내해야 합니다.

바이브 메이커가 챙길 한 가지

옵션이 10개 이하면 일반 드롭다운, 30개 이상이면 검색 가능한 combo box를 씁니다. 그 사이는 사용 빈도에 따라 결정합니다.

관련

Date picker · Faceted search · Recognition over recall