Skip to main content
The Select component provides a searchable dropdown for users to choose from a list of options. It supports both basic mode (static options) and code mode (dynamic options from queries).

​
What it does

  • Displays a searchable dropdown menu
  • Stores the selected value in state
  • Supports static options (basic mode) or dynamic options (code mode)
  • Resizable width (120px to 432px)

​
Modes

​
Basic Mode

In basic mode, you define options manually in the settings panel:
SettingDescription
OptionsList of options with display name and value
Default ValueWhich option is selected by default
WidthHorizontal size of the select field
Each option has:
  • Display Name — What the user sees in the dropdown
  • Value — The internal value stored in state (auto-generated slug)
You can drag options to reorder them.

​
Code Mode

In code mode, you write a transform function that returns options dynamically, typically from query data: 
function transform(): { options: SelectOption[] } {
  const data = query('statuses-query');

  return {
    options: data.rows.map((row, index) => ({
      displayName: String(row.label),
      value: String(row.id),
      defaultValue: index === 0,  // First option is default
    })),
  };
}

​
Transform function (code mode)

Your transform must return an object with an options array: 
{
  options: Array<{
    displayName: string;    // Shown in dropdown
    value: string;          // Stored in state
    defaultValue?: boolean; // Exactly one must be true
  }>;
}
Important: Exactly one option must have defaultValue: true.

​
State

The Select component stores both the value and display name in state: 
{
  value: "selected-value",
  displayName: "Selected Option Label"
}
This can be accessed in code mode transforms: 
function transform(): { headers: string[]; rows: RowObject[] } {
  const filter = input('simple-select-abc');

  console.log(filter.value);       // "active"
  console.log(filter.displayName); // "Active Status"

  // ... rest of transform
}
See the State page for details on how state flows through your app.

​
Examples

​
Static status filter (basic mode)

Configure in the settings panel:
  • Option 1: “All” → all
  • Option 2: “Active” → active
  • Option 3: “Inactive” → inactive

​
Dynamic options from query (code mode)

function transform(): { options: SelectOption[] } {
  const categories = query('categories-query');

  return {
    options: categories.rows.map((row, index) => ({
      displayName: String(row.name),
      value: String(row.id),
      defaultValue: index === 0,
    })),
  };
}

​
Options with “All” choice (code mode)

function transform(): { options: SelectOption[] } {
  const statuses = query('statuses-query');

  const options: SelectOption[] = [
    { displayName: 'All Statuses', value: 'all', defaultValue: true },
    ...statuses.rows.map(row => ({
      displayName: String(row.name),
      value: String(row.code),
      defaultValue: false,
    })),
  ];

  return { options };
}

​
Using select value in a table

// In Table transform
function transform(): { headers: string[]; rows: RowObject[] } {
  const data = query('orders-query');
  const statusFilter = input('simple-select-abc');

  let filtered = data.rows;
  if (statusFilter.value !== 'all') {
    filtered = data.rows.filter(row =>
      row.status === statusFilter.value
    );
  }

  return {
    headers: ['Order ID', 'Status', 'Total'],
    rows: filtered,
  };
}

​
When to use each mode

Use Basic Mode when…Use Code Mode when…
Options are static and knownOptions come from database
Few options (< 10)Many options
Options rarely changeOptions change based on other data
No programming neededNeed custom logic