Combobox
검색 가능한 드롭다운 선택 컴포넌트입니다. 많은 옵션 중에서 빠르게 검색하여 선택할 수 있습니다.
개요
설치
사용법
Combobox와 ComboboxOption 타입을 import하여 사용합니다. options 배열과 value/onValueChange로 상태를 관리합니다.
예제
크기
sm, md, lg 세 가지 크기를 제공합니다.
아이콘
옵션에 아이콘을 추가하여 시각적 구분을 제공합니다.
그룹
옵션을 그룹별로 분류하여 표시합니다.
설명
옵션에 추가 설명을 표시합니다.
선택 해제
clearable 속성으로 선택 해제 버튼을 표시합니다.
상태
에러, 비활성화, 로딩 등 다양한 상태를 표현합니다.
접근성
WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.
- ARIA 속성:
role="combobox",aria-expanded,aria-haspopup적용 - 키보드 탐색: 화살표 키로 옵션 탐색, Enter로 선택, Escape로 닫기
- 검색 기능: 많은 옵션에서 빠르게 필터링하여 선택 가능
- 포커스 관리: 팝오버 열림/닫힘 시 적절한 포커스 이동
- 레이블 연결:
aria-label또는aria-labelledby로 레이블 연결 지원