Input Control

The <reeflow-input> component captures free-form user input: text, numbers, dates, and more. Its value is available to queries via RF_PARAM() using its control-id.

Basic usage

React

import { ReeflowProvider, ReeflowInput, ReeflowTable } from '@reeflow/react';

<ReeflowProvider authToken="your-token">
  <ReeflowInput controlId="min-price" type="number" label="Minimum price" value={0} min="0" />

  <ReeflowTable
    title="Products"
    query={{
      type: 'table',
      columns: [{ name: 'products.name' }, { name: 'products.price' }],
      filters: [
        {
          column: 'products.price',
          operator: 'gte',
          values: ["RF_PARAM('min-price')"],
        },
      ],
    }}
  />
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider auth-token="your-token">
  <reeflow-input control-id="min-price" type="number" label="Minimum price" value="0" min="0"></reeflow-input>

  <reeflow-table title="Products">
    <script type="application/json" slot="query">
      {
        "type": "table",
        "columns": [{ "name": "products.name" }, { "name": "products.price" }],
        "filters": [
          {
            "column": "products.price",
            "operator": "gte",
            "values": ["RF_PARAM('min-price')"]
          }
        ]
      }
    </script>
  </reeflow-table>
</reeflow-provider>

Attributes

Attribute	Type	Default	Description
control-id	string	—	Required. Unique identifier used in RF_PARAM() references
type	'text' | 'number' | 'date' | 'daterange' | 'email' | 'url'	'text'	Input type. Determines validation and rendering
label	string	—	Display label above the input
placeholder	string	—	Placeholder text
value	string | number	—	Current or initial value
min	string	—	Minimum value (for number and date types)
max	string	—	Maximum value (for number and date types)
pattern	string	—	Regex validation pattern
debounce	number	—	Debounce delay in milliseconds (for text type only)
disabled	boolean	false	Disable the input
readonly	boolean	false	Make the input read-only
required	boolean	false	Mark the input as required

Input types

• text — Free-form text. Supports debounce to avoid re-executing queries on every keystroke.
• number — Numeric input. Values are automatically converted to Number.
• date — Single date picker.
• daterange — Renders two date inputs (start and end) separated by “to”.
• email — Email input with built-in validation.
• url — URL input with built-in validation.

Debouncing text input

For text inputs connected to queries, use debounce to wait for the user to stop typing before triggering a query:

React

<ReeflowInput controlId="search" type="text" label="Search" debounce={300} />;

Vanilla JS / HTML

<reeflow-input control-id="search" type="text" label="Search" debounce="300"></reeflow-input>

Events

Event	Detail	Description
reeflow-input-value-change	{ controlId, value, previousValue }	Fired when value changes
reeflow-input-validation-change	{ controlId, isValid, errors }	Fired when validation state changes