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

QueryVariablesMenu

Shell

Name per-run values for SQL variable placeholders; the caller performs substitution.

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

Live preview

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

100%

The parts that change between runs

Insert one to see the token.

Usage guidance

Best practices

  • Keep each variable id unique and follow isValidQueryVariableName for names. value/onChange manage only the variable list.
  • Connect onInsert(name) to SqlEditorHandle.insertText to insert the {variables.name} token into the actual document.
  • Send the SQL template and a variable snapshot together at execution. Validate types and permitted names on the server, then bind values as parameters.

Usage to avoid

  • Do not execute user input through SQL string substitution. Inserting a token and binding its value are separate operations.

Usage examples

Insert variable tokens into the editor

QueryVariablesMenu

PropTypeDefaultDescription
valueRequiredQueryVariable[]—변수 목록
onChangeRequired(variables: QueryVariable[]) => void—변수 변경
onInsert(name: string) => void—{variables.name}을 커서에 삽입
disabledboolean—비활성
disabledReasonstring—비활성 사유. 툴팁으로 표시
labelsQueryVariablesMenuLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (2)QueryVariablesMenupopoverinput
View test results

테스트 커버리지

2026년 7월 9일

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

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

테스트를 추가한 뒤 `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.

PreviousQueryFiltersMenuNextQueryHistoryList