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

QueryFilterBar

Shell

Share one Query between QueryBar and filter buttons, deriving active button states from the query.

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

Live preview

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

100%

One query, two ways to write it

(비어 있음)

검색창에 status:archived 를 쳐 보세요 — 상태 필터가 켜집니다.

Usage guidance

Best practices

  • Put a single Query string in the URL to make the entire filter state shareable.
  • Connect value and onChange to the same Query state to synchronize text input and filter buttons. Use formatQuery to create a shareable string.
  • This component does not fetch data. Connect the updated Query to filtering or API requests in the host, and control request frequency when live is enabled.

Usage to avoid

  • Do not give filter buttons separate state; that would create two sources of truth.

Usage examples

A Query shared by text input and filter buttons

QueryFilterBar

PropTypeDefaultDescription
valueRequiredQuery—필터 상태 전부
onChangeRequired(query: Query) => void—Query 변경
filtersRequiredQueryFilterDef[]—필터 컨트롤 정의 (is / field_value_selection / field_value_toggle)
fieldsQueryField[]—텍스트 입력 자동완성
actionsReactNode—필터 행 끝 슬롯
showClausesbooleantrue절을 제거 가능한 칩으로 표시
livebooleanfalse매 입력마다 커밋
disabledbooleanfalse전체 비활성
queryBarLabelsQueryBarLabels—QueryBar로 통과되는 나머지 문구. placeholder/ariaLabel은 labels가 이깁니다
labelsQueryFilterBarLabels—검색·필터·초기화 문구
classNamestring—추가 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

QueryFilterBar 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

SearchCombobox

Shells

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

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.

PreviousInspectorLayoutNextCatalogFrame