Inputs

Overview

Inputs add interactivity to dashboards. They render as a filter bar above the charts and re-execute queries when values change. Inspired by Evidence.dev's inputs pattern, adapted for the Cube semantic layer.

Two input types are available:

• DateRange — preset date range picker that overrides timeDimension.dateRange
• Dropdown — dimension value selector that adds/replaces filters

DateRange

Renders a date range preset picker. When changed, overrides timeDimension.dateRange on targeted queries.

<DateRange name="period" default="last-6-months" label="Time Period" />

Props

Targeting

Targeting lets you control which queries a filter affects — useful when some charts should stay fixed while others respond to filter changes.

• No queries prop — applies to ALL queries that have a timeDimension
• With queries prop — only applies to the listed queries

Presets

Dropdown

Renders a dropdown selector populated from a query's dimension values. Adds a filter on the specified dimension to targeted queries.

<Dropdown name="channel" dimension="orders.channel" data={channels} queries="main,trend" label="Channel" />

Props

Behavior

• Always includes an "All" option that removes the filter
• The dropdown's own data query is never filtered by itself (prevents circular dependencies)
• queries is required — the dropdown only filters explicitly listed queries

Examples

DateRange only

---
title: Revenue Trends
---

<DateRange name="period" default="last-6-months" label="Time Period" />

` ``query monthly_revenue
measures: [orders.total_revenue]
timeDimension:
  dimension: orders.created_at
  granularity: month
` ``

<LineChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" />

The DateRange automatically applies to monthly_revenue because it has a timeDimension. No hardcoded dateRange needed in the query.

Dropdown with query binding

---
title: Sales by Channel
---

` ``query channels
dimensions: [orders.channel]
` ``

<Dropdown name="ch" dimension="orders.channel" data={channels} queries="main" label="Channel" />

` ``query main
measures: [orders.total_revenue]
dimensions: [orders.city]
` ``

<BarChart data={main} x="orders.city" y="orders.total_revenue" />

Combined inputs

---
title: Sales Dashboard
---

<DateRange name="period" default="last-6-months" label="Time Period" />
<Dropdown name="channel" dimension="orders.channel" data={channels} queries="trend,by_city" label="Channel" />

` ``query channels
dimensions: [orders.channel]
` ``

` ``query trend
measures: [orders.total_revenue]
timeDimension:
  dimension: orders.created_at
  granularity: month
` ``

<LineChart data={trend} x="orders.created_at" y="orders.total_revenue" />

` ``query by_city
measures: [orders.total_revenue]
dimensions: [orders.city]
` ``

<BarChart data={by_city} x="orders.city" y="orders.total_revenue" />

Both inputs work together: the DateRange scopes the time window on trend (which has a timeDimension), and the Dropdown filters both trend and by_city by channel.

Shareable URLs

Input values automatically sync to URL query params. When a user changes a filter, the URL updates to reflect the current state — for example:

/dashboards/sales?period=last-30-days&channel=Online

• Default values are omitted from the URL for clean links
• Sharing a URL preserves the current filter state — recipients see exactly the same filtered view
• Refreshing the page restores the active filters from the URL
• The Copy Link button in the dashboard header copies the full URL including filter params

DateRange inputs store the preset key (e.g. last-30-days), so shared URLs stay relative to today. Dropdown inputs store the selected value string.

See Also

• Dashboards — overview and deployment
• Components — chart and display components
• Examples — complete dashboard examples