Input components allow users to interact with your Evidence reports by filtering data, selecting options, and triggering actions.
Dropdown Single and multi-select dropdowns
DateRange Date and date range pickers
TextInput Free-form text input
ButtonGroup Toggle buttons and radio groups
Checkbox Boolean checkboxes
Slider Range and value sliders
All input values are available through the inputs object:
< Dropdown name = "category" data = {categories} value = "category" /> Selected: {inputs.category.value} Label: {inputs.category.label}
Use inputs in SQL queries:
SELECT * FROM orders WHERE category = '${inputs.category.value}'
Dropdown Dropdowns allow users to select from a list of options.
Dropdown from Query ```sql categories SELECT category FROM orders GROUP BY category ORDER BY category
### With Custom Title ```markdown <Dropdown data={years} name="year" value="year" title="Order Year" />
Hardcoded Options < Dropdown name = hardcoded_option > < DropdownOption value = 1 valueLabel = "Option 1" /> < DropdownOption value = 2 valueLabel = "Option 2" /> < DropdownOption value = 3 valueLabel = "Option 3" /> </ Dropdown >
Default Value < Dropdown name = "category" data = {categories} value = "category" defaultValue = "Electronics" />
Multi-Select Allow multiple selections:
< Dropdown name = "multi_select" data = {categories} value = "category" multiple />
Use in SQL with IN clause:
SELECT * FROM orders WHERE category IN ${ inputs . multi_select . value }
Select All by Default < Dropdown name = "categories" data = {categories} value = "category" multiple selectAllByDefault />
Dropdown Props Unique identifier for accessing the input value
Query result containing options (use with value prop)
Column name to use for option values
Label displayed above the dropdown
Initial selected value(s)
Allow multiple selections
Select all options initially (multi-select only)
Column to order options by
DateRange Date pickers for filtering data by date ranges.
Single Date Picker < DateRange name = "start_date" title = "Start Date" />
Date Range Picker < DateRange name = "date_range" title = "Select Date Range" />
Access start and end dates:
SELECT * FROM orders WHERE order_date >= '${inputs.date_range.start}' AND order_date <= '${inputs.date_range.end}'
With Default Dates < DateRange name = "date_range" start = "2024-01-01" end = "2024-12-31" />
DateRange Props Unique identifier for accessing the input value
Label displayed above the date picker
Default start date (YYYY-MM-DD)
Default end date (YYYY-MM-DD)
TextInput Free-form text input for searching and filtering.
Basic TextInput < TextInput name = "search" title = "Search Products" placeholder = "Enter product name..." />
Use in Query SELECT * FROM products WHERE product_name ILIKE '%${inputs.search.value}%'
With Default Value < TextInput name = "search" title = "Search" defaultValue = "Widget" />
TextInput Props Unique identifier for accessing the input value
Label displayed above the input
Toggle buttons for selecting between options.
< ButtonGroup name = view_mode > < ButtonGroupItem value = "chart" label = "Chart View" /> < ButtonGroupItem value = "table" label = "Table View" /> < ButtonGroupItem value = "both" label = "Both" /> </ ButtonGroup >
Conditional Display {#if inputs.view_mode.value === 'chart' || inputs.view_mode.value === 'both'} < BarChart data = {data} x = "category" y = "sales" /> {/if} {#if inputs.view_mode.value === 'table' || inputs.view_mode.value === 'both'} < DataTable data = {data} /> {/if}
Unique identifier for accessing the input value
Label displayed above the button group
Checkbox Boolean checkboxes for on/off options.
< Checkbox name = "include_inactive" label = "Include Inactive Customers" />
Use in Query SELECT * FROM customers WHERE {# if ! inputs . include_inactive . value } status = 'active' { / if }
Checkbox Props Unique identifier for accessing the input value
Label displayed next to checkbox
Slider Range sliders for numeric inputs.
Basic Slider < Slider name = "price_max" title = "Max Price" min = 0 max = 1000 defaultValue = 500 />
Use in Query SELECT * FROM products WHERE price <= ${ inputs . price_max . value }
Range Slider < Slider name = "price_range" title = "Price Range" min = 0 max = 1000 defaultValue = {[100, 800]} range />
Slider Props Unique identifier for accessing the input value
Label displayed above the slider
Enable range mode (two handles)
Complete Example Here’s a complete example using multiple inputs:
# Sales Dashboard ```sql categories SELECT DISTINCT category FROM orders ORDER BY category
SELECT DISTINCT region FROM orders ORDER BY region
Filters SELECT DATE_TRUNC( 'month' , order_date) as month , SUM (sales) as total_sales, COUNT ( * ) as num_orders FROM orders WHERE category IN ${ inputs . category . value } AND region IN ${ inputs . region . value } AND order_date >= '${inputs.date_range.start}' AND order_date <= '${inputs.date_range.end}' GROUP BY 1 ORDER BY 1
Results ## Best Practices 1. **Use descriptive names** - Make input names clear and meaningful 2. **Provide defaults** - Set sensible default values 3. **Add titles** - Label inputs clearly 4. **Multi-select for categories** - Use multi-select for category filters 5. **Date ranges for time** - Use DateRange for time-based filtering 6. **Show selected values** - Display current filter selections 7. **Handle empty results** - Consider what happens with no matching data ## Input State Management Input values persist in the URL, allowing users to: - Share filtered views via URL - Bookmark specific filter combinations - Navigate back/forward through filter states ## Conditional Logic Use Svelte's conditional syntax with inputs: ```markdown {#if inputs.view_type.value === 'summary'} <BigValue data={data} value="total"/> {:else if inputs.view_type.value === 'detail'} <DataTable data={data}/> {:else} <BarChart data={data} x="category" y="sales"/> {/if}
Next Steps
Charts Visualize filtered data
Custom Components Build custom input components