The TextInput component allows users to enter free-form text that can be used in queries and filters.
Basic Usage
<TextInput
name="searchTerm"
title="Search"
placeholder="Enter search term..."
/>
Props
Unique identifier for the input. Used to reference the text value using {inputs.name}
Label displayed above the input field
placeholder
string
default:"Type to search"
Placeholder text shown when the input is empty
Initial value of the text input<TextInput name="query" title="Search" defaultValue="electronics" />
Help text displayed as an info icon next to the title
When false (default), the input value is automatically SQL-escaped by replacing single quotes with double single quotes. Set to true only if you need raw input (not recommended for security reasons).<!-- Safe by default: "O'Brien" becomes "O''Brien" -->
<TextInput name="lastName" title="Last Name" />
<!-- Unsafe mode (use with caution) -->
<TextInput name="rawInput" title="Raw Input" unsafe />
Whether to hide the input field when printing
Using Text Input Values
Basic String Matching
SELECT *
FROM products
WHERE product_name LIKE '%{inputs.searchTerm}%'
With SQL Parameter
SELECT *
FROM customers
WHERE last_name = {inputs.searchTerm.sql}
Fuzzy Search with Damerau-Levenshtein
SELECT
product_name,
{inputs.searchTerm.search('product_name')} as similarity
FROM products
WHERE similarity < 3
ORDER BY similarity
{
toString(): string, // Returns the SQL-escaped string
sql: "'value'", // SQL-quoted and escaped string
search: (col) => string // Returns damerau_levenshtein function
}
Usage Examples
// Direct usage (toString is called automatically)
inputs.searchTerm // "electronics"
// SQL-safe quoted string
inputs.searchTerm.sql // "'electronics'"
// Fuzzy search function
inputs.searchTerm.search('product_name') // "damerau_levenshtein(product_name, 'electronics')"
Examples
Product Search
<TextInput
name="productSearch"
title="Search Products"
placeholder="Enter product name..."
/>
```sql matching_products
SELECT
product_id,
product_name,
price,
category
FROM products
WHERE LOWER(product_name) LIKE LOWER('%{inputs.productSearch}%')
ORDER BY product_name
LIMIT 50
### Fuzzy Name Search
```svelte
<TextInput
name="customerName"
title="Customer Name"
description="Find similar names even with typos"
/>
```sql similar_customers
SELECT
customer_id,
full_name,
{inputs.customerName.search('full_name')} as distance
FROM customers
WHERE distance <= 3
ORDER BY distance, full_name
LIMIT 20
### Multi-Field Filter
```svelte
<TextInput name="nameFilter" title="Name" />
<TextInput name="emailFilter" title="Email" />
<TextInput name="cityFilter" title="City" />
```sql filtered_users
SELECT * FROM users
WHERE
(LENGTH('{inputs.nameFilter}') = 0 OR name LIKE '%{inputs.nameFilter}%')
AND (LENGTH('{inputs.emailFilter}') = 0 OR email LIKE '%{inputs.emailFilter}%')
AND (LENGTH('{inputs.cityFilter}') = 0 OR city LIKE '%{inputs.cityFilter}%')
### Search with Default Value
```svelte
<TextInput
name="category"
title="Category Filter"
defaultValue="Electronics"
/>
```sql filtered_products
SELECT
product_name,
price,
stock
FROM products
WHERE category = {inputs.category.sql}
### Case-Insensitive Search
```svelte
<TextInput
name="search"
title="Search"
placeholder="Type to search..."
/>
```sql search_results
SELECT * FROM items
WHERE LOWER(title) LIKE LOWER('%{inputs.search}%')
OR LOWER(description) LIKE LOWER('%{inputs.search}%')
### Conditional Query Execution
```markdown
<TextInput name="keyword" title="Keyword" />
<!-- Only show results if keyword is entered -->
{#if inputs.keyword}
<DataTable data={search_results} />
{/if}
<TextInput name="productName" title="Product Name" />
<Dropdown name="category" data={categories} value="category_id" label="category_name" />
<DateRange name="dateRange" title="Date Range" />
```sql filtered_sales
SELECT
order_date,
product_name,
category,
amount
FROM sales
WHERE
product_name LIKE '%{inputs.productName}%'
AND category_id = {inputs.category}
AND order_date BETWEEN '{inputs.dateRange.start}' AND '{inputs.dateRange.end}'
## SQL Injection Protection
By default, TextInput automatically escapes single quotes to prevent SQL injection:
```svelte
<TextInput name="userInput" title="User Input" />
<!-- If user enters: O'Brien -->
<!-- The value becomes: O''Brien (safe for SQL) -->
```sql safe_query
SELECT * FROM users WHERE last_name = {inputs.userInput.sql}
-- Generates: SELECT * FROM users WHERE last_name = 'O''Brien'
## Search Methods
### Exact Match
```sql
WHERE column = {inputs.text.sql}
Partial Match (LIKE)
WHERE column LIKE '%{inputs.text}%'
Starts With
WHERE column LIKE '{inputs.text}%'
Ends With
WHERE column LIKE '%{inputs.text}'
Fuzzy Match (Damerau-Levenshtein Distance)
WHERE {inputs.text.search('column')} <= 3