Select Control

The <reeflow-select> component provides single or multi-select dropdowns. Options can be defined statically in HTML or loaded dynamically from a JSONQL query. Its value is available to queries via RF_PARAM() using its control-id.

Static options

Define options directly as <option> children:

React

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

<ReeflowProvider authToken="your-token">
  <ReeflowSelect controlId="status" label="Status">
    <option value="active" selected>
      Active
    </option>
    <option value="inactive">Inactive</option>
    <option value="archived">Archived</option>
  </ReeflowSelect>

  <ReeflowTable
    title="Orders"
    query={{
      type: 'table',
      columns: [{ name: 'orders.id' }, { name: 'orders.customer' }],
      filters: [
        {
          column: 'orders.status',
          operator: 'equals',
          values: ["RF_PARAM('status')"],
        },
      ],
    }}
  />
</ReeflowProvider>;

Vanilla JS / HTML

<reeflow-provider auth-token="your-token">
  <reeflow-select control-id="status" label="Status">
    <option value="active" selected>Active</option>
    <option value="inactive">Inactive</option>
    <option value="archived">Archived</option>
  </reeflow-select>

  <reeflow-table title="Orders">
    <script type="application/json" slot="query">
      {
        "type": "table",
        "columns": [{ "name": "orders.id" }, { "name": "orders.customer" }],
        "filters": [
          {
            "column": "orders.status",
            "operator": "equals",
            "values": ["RF_PARAM('status')"]
          }
        ]
      }
    </script>
  </reeflow-table>
</reeflow-provider>

Query-based options

Load options dynamically from the database. Use value-column and label-column to map query result columns to option values and labels:

React

import { ReeflowSelect } from '@reeflow/react';

<ReeflowSelect
  controlId="region"
  label="Region"
  valueColumn="id"
  labelColumn="name"
  query={{
    type: 'table',
    columns: [{ name: 'regions.id' }, { name: 'regions.name' }],
  }}
/>;

Vanilla JS / HTML

<reeflow-select control-id="region" label="Region" value-column="id" label-column="name">
  <script type="application/json" slot="query">
    {
      "type": "table",
      "columns": [{ "name": "regions.id" }, { "name": "regions.name" }]
    }
  </script>
</reeflow-select>

Attributes

Attribute	Type	Default	Description
control-id	string	—	Required. Unique identifier used in RF_PARAM() references
label	string	—	Display label above the select
value	string | string[]	—	Current or initial value
multiple	boolean	false	Enable multi-select mode
value-column	string	—	Column name to use as option value (required for query-based options)
label-column	string	—	Column name to use as option label (defaults to value-column)
distinct	boolean	false	Remove duplicate options based on value
disabled	boolean	false	Disable the select
readonly	boolean	false	Make the select read-only
required	boolean	false	Mark the select as required

Multi-select

Enable multiple to allow selecting several values. The control value becomes an array:

React

<ReeflowSelect controlId="categories" label="Categories" multiple>
  <option value="electronics">Electronics</option>
  <option value="clothing">Clothing</option>
  <option value="books">Books</option>
</ReeflowSelect>;

Vanilla JS / HTML

<reeflow-select control-id="categories" label="Categories" multiple>
  <option value="electronics">Electronics</option>
  <option value="clothing">Clothing</option>
  <option value="books">Books</option>
</reeflow-select>

Events

Event	Detail	Description
reeflow-select-value-change	{ controlId, value, previousValue }	Fired when selection changes
reeflow-select-options-loaded	{ controlId, options }	Fired when query-based options finish loading