Combobox
core자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.
컴포넌트 의존 관계
깊이
100%
기본 사용
그룹화
테스트 커버리지
2026년 2월 4일3/3 통과
3성공
0실패
3전체
- 입력 필드를 렌더링한다
- ComboboxEmpty 기본 메시지를 렌더링한다
- ComboboxEmpty 커스텀 메시지를 렌더링한다
ComboboxRoot Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
setValue | (value: string) => void | — | 입력값 변경 핸들러 |
resetValueOnHide | boolean | false | 팝오버 닫힐 때 입력값 리셋 |
ComboboxInput Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
placeholder | string | — | 플레이스홀더 텍스트 |
autoSelect | boolean | false | 첫 항목 자동 선택 |
className | string | — | 기본 스타일 오버라이드 |
ComboboxPopover Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | ComboboxItem/Group 목록 |
sameWidth | boolean | true | 입력과 같은 너비 |
gutter | number | 4 | 입력과의 간격 (px) |
className | string | — | 기본 스타일 오버라이드 |
ComboboxItem Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value* | string | — | 항목 값 |
children* | ReactNode | — | 항목 내용 |
className | string | — | 기본 스타일 오버라이드 |
ComboboxGroup Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | GroupLabel + Item 그룹 |
ComboboxGroupLabel Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children* | ReactNode | — | 그룹 레이블 |
className | string | — | 기본 스타일 오버라이드 |
ComboboxEmpty Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
children | ReactNode | "결과가 없습니다." | 빈 상태 메시지 |
className | string | — | 기본 스타일 오버라이드 |
Import
tsx
import {
ComboboxRoot,
ComboboxInput,
ComboboxPopover,
ComboboxItem,
ComboboxGroup,
ComboboxGroupLabel,
ComboboxEmpty,
} from "@reopt-ai/opt-ui";키보드 동작
| 키 | 동작 |
|---|---|
| ↑ ↓ | 항목 탐색 |
| Enter | 항목 선택 |
| Esc | 팝오버 닫기 |
고급 사용법
비동기 검색, 커스텀 아이템 렌더링, 선택 상태 관리 등 고급 패턴은 고급 패턴 가이드를 참고하세요.