Skip to main content
The InteractiveQuestion component renders an interactive question that allows users to explore data, modify visualizations, apply filters, and drill into details.

​
Basic usage

import { InteractiveQuestion } from '@metabase/embedding-sdk-react';

function Dashboard() {
  return <InteractiveQuestion questionId={1} />;
}

​
With custom height

<InteractiveQuestion questionId={1} height={600} />

​
Using entity ID

You can reference questions by their entity ID instead of numeric ID: 
<InteractiveQuestion questionId="abc123-entity-id" />

​
Composing with sub-components

The InteractiveQuestion component provides sub-components for building custom layouts: 
import { InteractiveQuestion } from '@metabase/embedding-sdk-react';

function CustomQuestionView() {
  return (
    <InteractiveQuestion questionId={1}>
      <div className="header">
        <InteractiveQuestion.Title />
        <div className="actions">
          <InteractiveQuestion.SaveButton />
          <InteractiveQuestion.DownloadWidget />
        </div>
      </div>
      
      <div className="filters">
        <InteractiveQuestion.Filter />
        <InteractiveQuestion.ResetButton />
      </div>
      
      <InteractiveQuestion.QuestionVisualization />
    </InteractiveQuestion>
  );
}

​
Creating new questions

​
New query builder question

<InteractiveQuestion 
  questionId="new" 
  isSaveEnabled={true}
  onSave={(question) => {
    console.log('Question saved:', question);
  }}
/>

​
New SQL question

<InteractiveQuestion 
  questionId="new-native" 
  isSaveEnabled={true}
  onSave={(question) => {
    console.log('SQL question saved:', question);
  }}
/>

​
With event handlers

<InteractiveQuestion
  questionId={1}
  onRun={(question) => {
    console.log('Question ran:', question);
  }}
  onSave={(question) => {
    console.log('Question saved:', question);
  }}
  onBeforeSave={(question) => {
    console.log('About to save:', question);
  }}
/>

​
With SQL parameters

<InteractiveQuestion
  questionId={5}
  initialSqlParameters={{
    user_id: '123',
    date_from: '2024-01-01',
  }}
/>

​
Hiding specific parameters

<InteractiveQuestion
  questionId={1}
  hiddenParameters={['category', 'region']}
/>

​
With plugins

const plugins = {
  mapQuestionClickActions: (clickActions, clickedDataPoint) => {
    return [
      ...clickActions,
      {
        name: 'custom-action',
        onClick: () => {
          console.log('Custom action clicked', clickedDataPoint);
        },
      },
    ];
  },
};

<InteractiveQuestion questionId={1} plugins={plugins} />

​
Available sub-components

All sub-components can be used within an InteractiveQuestion parent: 
<InteractiveQuestion questionId={1}>
  <InteractiveQuestion.NavigationBackButton />
  {/* Other components */}
</InteractiveQuestion>

​
Props

​
questionId
SdkQuestionId
required
The ID of the question. Can be:
  • Numerical ID (e.g., 1)
  • Entity ID string (e.g., "abc123")
  • "new" for a new query builder question
  • "new-native" for a new SQL question
​
height
number | string
Height of the component (e.g., 400 or "100%").
​
width
number | string
Width of the component.
​
style
React.CSSProperties
Custom CSS styles.
​
className
string
Custom CSS class name.
​
withChartTypeSelector
boolean
default:"true"
Whether to show the chart type selector.
​
withDownloads
boolean
default:"true"
Whether to enable download functionality.
​
withAlerts
boolean
default:"true"
Whether to enable alerts functionality.
​
isSaveEnabled
boolean
default:"false"
Whether to enable saving. Required for questionId="new" or questionId="new-native".
​
initialSqlParameters
SqlParameterValues
Initial values for SQL template tags.
​
hiddenParameters
string[]
List of parameter names to hide from the UI.
​
title
string
Custom title to display instead of the question’s title.
​
plugins
MetabasePluginsConfig
Plugin configuration for this specific question.
​
onRun
(question: MetabaseQuestion) => void
Callback when the question is run.
​
onSave
(question: MetabaseQuestion) => void
Callback when the question is saved.
​
onBeforeSave
(question: MetabaseQuestion) => void
Callback before the question is saved.
​
onNavigateBack
() => void
Callback when the back button is clicked.
​
onVisualizationChange
(question: MetabaseQuestion) => void
Callback when the visualization type changes.
​
targetCollection
SdkCollectionId
Collection ID where new questions should be saved.
​
targetDashboardId
SdkDashboardId
Dashboard ID to add the question to after saving.

​
Sub-components reference

​
InteractiveQuestion.NavigationBackButton

Back button to navigate back after drills and internal navigation. Renders null if there’s nothing to go back to.

​
InteractiveQuestion.Filter

Filter controls for the question.

​
InteractiveQuestion.FilterDropdown

Dropdown menu for filter controls.

​
InteractiveQuestion.ResetButton

Button to reset filters and modifications.

​
InteractiveQuestion.Title

Question title display.

​
InteractiveQuestion.Summarize

Summarization controls.

​
InteractiveQuestion.SummarizeDropdown

Dropdown menu for summarization.

​
InteractiveQuestion.Editor

Query editor (notebook mode).

​
InteractiveQuestion.EditorButton

Button to toggle the query editor.

​
InteractiveQuestion.QuestionVisualization

The main visualization display.

​
InteractiveQuestion.VisualizationButton

Button to toggle visualization settings.

​
InteractiveQuestion.SaveQuestionForm

Form for saving the question.

​
InteractiveQuestion.SaveButton

Button to save the question.

​
InteractiveQuestion.ChartTypeSelector

Selector for changing the chart type.

​
InteractiveQuestion.ChartTypeDropdown

Dropdown menu for chart types.

​
InteractiveQuestion.QuestionSettings

Question settings controls.

​
InteractiveQuestion.QuestionSettingsDropdown

Dropdown menu for question settings.

​
InteractiveQuestion.Breakout

Breakout/group by controls.

​
InteractiveQuestion.BreakoutDropdown

Dropdown menu for breakout options.

​
InteractiveQuestion.DownloadWidget

Download controls.

​
InteractiveQuestion.DownloadWidgetDropdown

Dropdown menu for download options.

​
InteractiveQuestion.AlertsButton

Button to manage question alerts.

​
InteractiveQuestion.SqlParametersList

List of SQL template tag parameters.

​
TypeScript types

import type {
  InteractiveQuestionProps,
  InteractiveQuestionComponents,
  MetabaseQuestion,
  SdkQuestionId,
  SqlParameterValues,
} from '@metabase/embedding-sdk-react';

Build docs developers (and LLMs) love

Get started for freeTalk to us