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.
​
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