The ButtonGroup component provides a set of mutually exclusive options displayed as buttons or tabs. Only one option can be selected at a time.
Basic Usage
<ButtonGroup name="timeframe">
<ButtonGroupItem value="day" valueLabel="Daily" />
<ButtonGroupItem value="week" valueLabel="Weekly" />
<ButtonGroupItem value="month" valueLabel="Monthly" />
</ButtonGroup>
Props
Unique identifier for the input. Used to reference the selected value using {inputs.name}
Label displayed above the button group
Query result to populate button options. When provided, requires value and label props.
Column name from query to use as the button value. Required when using data prop.
Column name from query to use as the button label. Required when using data prop.
SQL ORDER BY clause to sort buttons<ButtonGroup name="priority" data={priorities} value="id" label="name" order="name ASC" />
SQL WHERE clause to filter button options
Initial value to select<ButtonGroup name="view" defaultValue="grid">
<ButtonGroupItem value="list" valueLabel="List" />
<ButtonGroupItem value="grid" valueLabel="Grid" />
</ButtonGroup>
Use a predefined set of options. Currently supports "dates" preset with values: “1 day”, “1 week”, “1 month”, “3 months”, “1 year”, “all”<ButtonGroup name="period" preset="dates" />
display
'buttons' | 'tabs'
default:"buttons"
Visual style of the button group
buttons: Compact button group with bordertabs: Larger tab-style buttons with spacing
color
string
default:"hsla(207, 65%, 39%, 1)"
Color for the active button state (accepts any CSS color value)
Help text displayed as an info icon next to the title
Whether to hide the button group when printing
Static Options
<ButtonGroup name="chartType" title="Chart Type">
<ButtonGroupItem value="bar" valueLabel="Bar Chart" />
<ButtonGroupItem value="line" valueLabel="Line Chart" />
<ButtonGroupItem value="area" valueLabel="Area Chart" />
</ButtonGroup>
Query-Based Options
<script>
const statuses = Query.create(`
SELECT
status_code as value,
status_name as label
FROM order_statuses
ORDER BY display_order
`);
</script>
<ButtonGroup
name="orderStatus"
data={statuses}
value="value"
label="label"
title="Filter by Status"
/>
Display Styles
<ButtonGroup name="view" display="buttons">
<ButtonGroupItem value="table" valueLabel="Table" />
<ButtonGroupItem value="chart" valueLabel="Chart" />
</ButtonGroup>
Tab Style
<ButtonGroup name="tab" display="tabs">
<ButtonGroupItem value="overview" valueLabel="Overview" />
<ButtonGroupItem value="details" valueLabel="Details" />
<ButtonGroupItem value="history" valueLabel="History" />
</ButtonGroup>
Using Presets
The dates preset provides common time period options:
<ButtonGroup name="timePeriod" preset="dates" title="Time Period" />
Using Selected Values
Access the selected value in queries:
SELECT *
FROM sales
WHERE date >= current_date - INTERVAL {inputs.timePeriod}
// Single value (e.g., "week")
inputs.timeframe // "week"
// Can be used directly in queries
// WHERE period = {inputs.timeframe}
Examples
Chart Type Switcher
<ButtonGroup name="chartType" title="Visualization">
<ButtonGroupItem value="bar" valueLabel="Bar" />
<ButtonGroupItem value="line" valueLabel="Line" />
<ButtonGroupItem value="scatter" valueLabel="Scatter" />
</ButtonGroup>
{#if inputs.chartType === 'bar'}
<BarChart data={salesData} />
{:else if inputs.chartType === 'line'}
<LineChart data={salesData} />
{:else}
<ScatterPlot data={salesData} />
{/if}
Time Period Filter
<ButtonGroup name="period" preset="dates" defaultValue="1 month" />
```sql time_filtered_sales
SELECT
date,
SUM(amount) as total
FROM sales
WHERE date >= current_date - INTERVAL {inputs.period}
GROUP BY date
ORDER BY date
### Mixed Static and Query Options
```svelte
<script>
const categories = Query.create(`SELECT DISTINCT category FROM products`);
</script>
<ButtonGroup name="filter" data={categories} value="category">
<ButtonGroupItem value="all" valueLabel="All Categories" />
</ButtonGroup>
Custom Styling
<ButtonGroup
name="status"
display="tabs"
color="#10b981"
title="Order Status"
>
<ButtonGroupItem value="pending" valueLabel="Pending" />
<ButtonGroupItem value="shipped" valueLabel="Shipped" />
<ButtonGroupItem value="delivered" valueLabel="Delivered" />
</ButtonGroup>