Input Tabs

Display a tab-style selector with distinct values from a database column to use in filters. Appears full-width and does not group with other filter inputs.

{% input_tabs
    id="category_filter"
    data="demo_daily_orders"
    value_column="category"
/%}

Examples

With Static Options

{% input_tabs id="status_filter" %}
    {% option value="active" label="Active" /%}
    {% option value="inactive" label="Inactive" /%}
    {% option value="pending" label="Pending" /%}
{% /input_tabs %}

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 · 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 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 tabs

Allowed 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

Available Filter Properties

When you reference a input tabs 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.

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

Allowed Children

• option