Combobox
검색 가능한 긴 목록에서 하나의 값을 고릅니다.
- 성숙도
- 후보
- 소스 경로
components/ui/combobox.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/reactradix-ui
실제 미리보기
사용할 때
사용 기준
선택지가 많거나 사용자가 정확한 이름을 모를 수 있을 때 씁니다.
사용하지 않을 때
짧고 고정된 목록에는 Native Select나 Select를 씁니다.
변형과 상태
closed고정 예시선택값과 입력 목적이 함께 읽히는지 확인합니다.
open직접 조작활성 항목, 선택 항목, 비활성 항목을 구분합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
empty직접 조작검색 결과가 없음을 짧은 문장으로 알립니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
combobox와 listbox 관계, 활성 항목, 선택 상태와 방향키 조작을 제공합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
options | readonly ComboboxOption[] | 예 | 검색하고 선택할 항목입니다. |
value | string | 아니요 | 제어되는 선택값입니다. |
onValueChange | (value: string) => void | 아니요 | 선택하거나 기존 선택을 편집해 값이 바뀔 때 호출됩니다. |
onValueCommit | (value: string) => void | 아니요 | 사용자가 목록의 항목을 확정했을 때만 호출됩니다. |
emptyText | string | 예 | 검색 결과가 없을 때 표시할 문구입니다. |
사용 예시
지원 importimport { Combobox, type ComboboxOption } from "@/components/ui/combobox"
<Combobox
aria-label="Framework"
options={options}
value={value}
onValueChange={setValue}
emptyText="No results"
/>