reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Combobox
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Combobox

Component

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

input
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ComboboxRoot, ComboboxInput, ComboboxPopover, ComboboxItem, ComboboxGroup, ComboboxGroupLabel, ComboboxEmpty } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용

그룹화

ComboboxRoot

PropTypeDefaultDescription
setValue(value: string) => void—입력값 변경 핸들러
resetValueOnHidebooleanfalse팝오버 닫힐 때 입력값 리셋

ComboboxInput

PropTypeDefaultDescription
placeholderstring—플레이스홀더 텍스트
autoSelectbooleanfalse첫 항목 자동 선택
classNamestring—기본 스타일 오버라이드

ComboboxPopover

PropTypeDefaultDescription
childrenRequiredReactNode—ComboboxItem/Group 목록
sameWidthbooleantrue입력과 같은 너비
gutternumber4입력과의 간격 (px)
classNamestring—기본 스타일 오버라이드

ComboboxItem

PropTypeDefaultDescription
valueRequiredstring—항목 값
childrenRequiredReactNode—항목 내용
classNamestring—기본 스타일 오버라이드

ComboboxGroup

PropTypeDefaultDescription
childrenRequiredReactNode—GroupLabel + Item 그룹

ComboboxGroupLabel

PropTypeDefaultDescription
childrenRequiredReactNode—그룹 레이블
classNamestring—기본 스타일 오버라이드

ComboboxEmpty

PropTypeDefaultDescription
childrenReactNode"결과가 없습니다."빈 상태 메시지
classNamestring—기본 스타일 오버라이드

컴포넌트 의존 관계

깊이
▲ USED BY (5)search-comboboxcommand-paletteproject-switcherasync-comboboxquery-filters-menuCombobox
View test results

테스트 커버리지

2026년 7월 9일4/4 통과
4성공
0실패
4전체
  • 입력 필드를 렌더링한다
  • ComboboxEmpty 기본 메시지를 렌더링한다
  • ComboboxEmpty 커스텀 메시지를 렌더링한다
  • 타이핑 시 비활성 항목이 리렌더되지 않는다 (항목별 구독)

키보드 동작

키동작
↑ ↓항목 탐색
Enter항목 선택
Esc팝오버 닫기

Related components

opt-ui

Select

Core

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

opt-ui

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

opt-ui

Input

Core

Use a standalone text input with labels, errors, hints, and icons.

opt-ui

Switch

Core

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

opt-ui

Textarea

Core

Enter multiline text with the same label, error, and hint API as Input.

opt-ui

Checkbox

Core

Use labeled checkboxes with descriptions, groups, and an indeterminate state synchronized to the DOM property.

PreviousDialogNextMenu