reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
SearchCombobox
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.

SearchCombobox

Shell

Search options with match-sorter fuzzy matching in a combobox.

filter
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { SearchCombobox } from "@reopt-ai/opt-ui";

Live preview

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

100%

기본 사용

패키지 검색

Usage examples

Search and select

SearchCombobox

PropTypeDefaultDescription
itemsRequiredstring[]—검색 대상 문자열 목록
placeholderstring"검색..."입력 플레이스홀더
labelstring"검색"입력 레이블
onSelect(item: string) => void—항목 선택 핸들러
labelsSearchComboboxLabels—noResults/loading 문구
asyncbooleanfalse비동기 검색 모드 활성화
onSearch(query: string) => Promise<string[]>—async=true일 때 사용할 검색 콜백
debounceMsnumber300비동기 검색 디바운스 ms

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (1)data-explorerSearchComboboxcombobox
View test results

테스트 커버리지

2026년 7월 9일4/4 통과
4성공
0실패
4전체
  • combobox role을 렌더링한다
  • 커스텀 placeholder를 표시한다
  • 입력값으로 목록을 필터링하고 키보드 선택을 전달한다
  • async 검색에서 느린 이전 응답을 폐기한다

Blocks that use this component

opt-ui

DataExplorer

Blocks

Explore filtered data with SearchCombobox, StatusSelect, and DataTable inside a group-spaced BlockLayout.

Related components

opt-ui

FilterBar

Shells

Filter a view with search, single-selection, and multiple-selection controls.

opt-ui

SegmentBuilder

Shells

Define event, property, cohort, or custom segments with accessible condition controls.

opt-ui

AsyncCombobox

Shells

Search asynchronously with built-in debouncing, loading feedback, and stale-response protection.

opt-ui

ColumnToggler

Shells

Choose visible table columns from a popover of checkboxes.

opt-ui

BulkActions

Shells

Act on selected items with a count badge, action dropdown, and clear-selection button.

opt-ui

SavedFilters

Shells

Save and browse filter presets with keyboard navigation and deletion confirmation in a popover.

PreviousDashboardGridNextStatusSelect