Combobox

Floating UI 기반의 헤드리스 검색 가능 셀렉트 컴포넌트. 제어 값과 검색어를 함께 관리하며, 포탈 렌더링과 CSS 전환을 지원합니다.

데모

과일을 검색하세요

Show Code

API 레퍼런스

Combobox

Prop	Type	Default	Description
value	string	-	현재 선택된 값
onChange	(value: string) => void	-	옵션 선택 시 콜백
search	string	-	현재 검색 입력값
onSearchChange	(search: string) => void	-	검색 입력값 변경 시 콜백
transition	boolean | UseTransitionStylesProps	false	열기/닫기 CSS 전환 활성화
children	ReactNode	-	Combobox 하위 컴포넌트 (Trigger, Options, Search)

Combobox.Trigger

Prop	Type	Default	Description
children	ReactElement	-	옵션 목록을 토글하는 클릭 가능한 요소. aria-haspopup, aria-expanded 자동 적용

Combobox.Options

Prop	Type	Default	Description
children	ReactNode | ((props: { floating, interactions }) => ReactNode)	-	Option 요소들 또는 floating 컨텍스트를 받는 렌더 함수
portal	boolean | FloatingPortalProps	false	포탈에서 옵션 렌더링 (Combobox.Options에 전달)
...props	ComponentPropsWithoutRef<"div">	-	모든 네이티브 div 요소 속성. role="listbox"로 렌더링

Combobox.Option

Prop	Type	Default	Description
value	string	-	이 옵션의 값
...props	ComponentPropsWithoutRef<"div">	-	모든 네이티브 div 요소 속성. role="option" 및 aria-selected로 렌더링

Combobox.Search

Prop	Type	Default	Description
...props	ComponentPropsWithoutRef<"input">	-	모든 네이티브 input 요소 속성. value·onChange는 root에서 주입되며, role="combobox", aria-autocomplete="list" 자동 적용