Skip to main content
Basic Usage 
{% button_group
    id="category_filter"
    data="demo_daily_orders"
    value_column="category"
/%}

​
Examples

​
With Static Options

With Static Options 
{% button_group id="status_filter" %}
    {% option value="active" label="Active" /%}
    {% option value="inactive" label="Inactive" /%}
    {% option value="pending" label="Pending" /%}
{% /button_group %}

​
Attributes

​
id
String
required
The id of the button group to be used in a filters prop
​
data
String
Name of the table to query
​
filters
Array
default:"[]"
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 button group’s id is used in the filters prop of a chart
​
label_column
String
Column name to use as the label for each option
​
title
String
Text displayed above the button group
​
info
String
Information tooltip text
​
initial_value
String | Array
Initial selected value(s)
​
multiple
Boolean
default:"false"
Allows multiple selections
​
select_first
Boolean
default:"false"
Automatically select the first option when the component loads
​
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.

​
Available Filter Properties

When you reference a button group filter in inline queries using the {{filter_id.property}} syntax, the following properties are available:

​
.filter

Returns a complete SQL filter expression ready to use in WHERE clauses. Returns true when no value is selected.

​
.selected

Returns the selected value wrapped in quotes, suitable for SQL comparisons. Returns an empty string when no value is selected. Use with a fallback value.

​
.literal

Returns the raw unescaped selected value, useful for dynamic column selection or other non-quoted uses.

​
.label

Returns the label text for the selected option(s). If multiple values are selected, returns comma-separated labels. Falls back to the value if no label is defined.

​
.fmt

Returns the format string associated with the selected option. Useful for dynamically updating chart formatting based on the selected value. For multiple selections, returns the first value’s format.

​
Allowed Children