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

QueryFiltersMenu

Shell

Pass date and property filters to SQL through a filters placeholder, with a warning and insertion action when it is missing.

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

Live preview

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

100%

Conditions the reader would rather not type

The query has no {filters} yet — set a filter to see the warning.
{
  "dateRange": null,
  "properties": []
}

Usage guidance

Best practices

  • value/onChange edit filter data. The host implements SQL execution and WHERE-clause construction.
  • Derive placeholderPresent from the current SQL. onInsertPlaceholder must insert {filters} into the actual editor, not just change a boolean.
  • onLoadValues supplies suggestions. Allow free-form input and empty suggestion lists, and validate fields and operators in the execution API.

Usage to avoid

  • Do not concatenate filter values into SQL. Validate permitted fields and operators on the server and bind values as parameters.

Usage examples

SQL placeholder and filter state

QueryFiltersMenu

PropTypeDefaultDescription
valueRequiredQueryFilters—기간과 속성 필터
onChangeRequired(filters: QueryFilters) => void—필터 변경
fieldsRequiredQueryFilterField[]—필드 선택지
placeholderPresentboolean—SQL에 {filters}가 있는지
onInsertPlaceholder() => void—{filters}를 커서에 삽입
onLoadValues(field: string) => Promise<string[]>—필드의 알려진 값. 값 입력란의 제안으로 쓰이며 자유 입력도 허용
presetsDateRangePreset[]—기간 프리셋
disabledboolean—비활성
labelsQueryFiltersMenuLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (5)QueryFiltersMenupopoverdate-range-pickerselectcomboboxcallout
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

SidebarNav

Shells

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

opt-ui

AppMenubar

Shells

Use a desktop-style menu bar with checkbox and radio menu items.

opt-ui

CommandPalette

Shells

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

opt-ui

ProjectSwitcher

Shells

Search and switch projects with a fuzzy-search combobox.

PreviousQueryResultChartNextQueryVariablesMenu