Skip to main content
Using filters 
{% input_tabs
    id="category_filter"
    data="demo.daily_orders"
    value_column="category"
/%}

{% bar_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    filters=["category_filter"]
    date_grain="month"
/%}

​
Examples

​
Using filters

Using filters 
{% input_tabs
    id="category_filter"
    data="demo.daily_orders"
    value_column="category"
/%}

{% bar_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    filters=["category_filter"]
    date_grain="month"
/%}

​
Using where

Using where 
{% input_tabs
    id="category_filter"
    data="demo.daily_orders"
    value_column="category"
/%}

{% bar_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    where="category = {{category_filter}}"
    date_grain="month"
/%}

​
Using Inline SQL

{% input_tabs
    id="category_filter"
    data="demo.daily_orders"
    value_column="category"
/%}

```sql filtered_orders
select * from demo.daily_orders
where category = {{category_filter}}
```

{% table data="filtered_orders" /%}

​
Attributes

​
id
string
required
The id of the input tabs to be used in a filters prop
​
data
string
Name of the table to query
​
filters
array
Array of filter IDs to apply when querying for options
​
value_column
string
Column name to use as the value for each option, and the column to filter by when this input tabs’ id is used in the filters prop of a chart
​
label_column
string
Column name to use as the label for each option
​
initial_value
string
Initial selected value (single selection only)
​
variant
string
default:"default"
Visual style variant: “default” for underline style, “well” for button-style tabsAllowed values:
  • default
  • well
​
full_width
boolean
default:"false"
Whether the tabs should take the full width of their container
​
align
string
default:"left"
Horizontal alignment of tabs. Note: align right only affects the default variant.Allowed values:
  • left
  • right
​
select_first
boolean
default:"true"
Automatically select the first option when the component loads (defaults to true)
​
order
string
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
where
string
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
date_range
options group
Use date_range to filter data for specific time periods. Accepts predefined ranges (e.g., “last 12 months”), dynamic ranges (e.g., “Last 90 days”), custom date ranges (e.g., “2020-01-01 to 2023-03-01”), or partial ranges (e.g., “from 2020-01-01”, “until 2023-03-01”)Example:
date_range={
  range = "last 7 days"
  date = "string"
}
Attributes:
  • range: string - Time period to filter. Use presets like ‘last 7 days’, dynamic patterns like ‘Last 90 days’, custom ranges like ‘2020-01-01 to 2023-03-01’, or partial ranges like ‘from 2020-01-01’.
    • Allowed values:
      • last 7 days
      • last 30 days
      • last 3 months
      • last 6 months
      • last 12 months
      • previous week
      • previous month
      • previous quarter
      • previous year
      • this week
      • this month
      • this quarter
      • this year
      • next week
      • next month
      • next quarter
      • next year
      • week to date
      • month to date
      • quarter to date
      • year to date
      • all time
  • date: string - Date column to filter on. Required when the data has multiple date columns.
​
width
number
Set the width of this component (in percent) relative to the page width

​
Using the Filter Variable

Reference this filter using {{filter_id}}. The value returned depends on where you use it.
ContextDefault PropertyNo SelectionResult
Inline SQL query.selected'''Electronics'
where attribute.selected'''Electronics'
Text / Markdown.literalElectronics

​
Available Properties

You can also access specific properties using {{filter_id.property}}:

​
.filter

Returns a complete SQL filter expression ready to use in WHERE clauses. Returns true when no value is selected. 
{% input_tabs id="category_filter" data="products" value_column="category" /%}

```sql filtered_products
select * from products
where {{category_filter.filter}}
```
Example value: category = 'Electronics'

​
.selected

Returns the selected value wrapped in quotes, suitable for SQL comparisons. Returns an empty string when no value is selected. 
{% input_tabs id="category_filter" data="products" value_column="category" /%}

```sql products_by_category
select * from products
where category = {{category_filter.selected}}
```
Example value: 'Electronics'

​
.literal

Returns the raw unescaped selected value, useful for display in text or dynamic column selection. 
{% input_tabs id="sort_column" data="products" value_column="column_name" /%}

```sql dynamic_sort
select * from products
order by {{sort_column.literal}}
```
Example value: Electronics

​
.label

Returns the display label for the selected option. Falls back to the value if no label is defined. 
{% input_tabs id="category_filter" %}
    {% option value="Electronics" label="Electronics" /%}
    {% option value="Sports" label="Sports" /%}
    {% option value="Home" label="Home" /%}
{% /input_tabs %}

Selected: {{category_filter.label}}
Example value: Electronics

​
.fmt

Returns the format string associated with the selected option. Useful for dynamically updating chart formatting. 
{% input_tabs id="metric_selector" %}
    {% option value="revenue" label="Revenue" fmt="usd" /%}
    {% option value="growth_rate" label="Growth Rate" fmt="pct1" /%}
{% /input_tabs %}

{% big_value data={metrics} value=value fmt={{metric_selector.fmt}} /%}
Example value: usd

​
Allowed Children