Skip to main content
The Input component captures text input from users. Use it to create search fields, forms, or any text-based user input.

​
What it does

  • Captures user text input
  • Stores the value in state automatically
  • Can be referenced in code mode transforms via input(slug)
  • Resizable width (120px to 432px)

​
Configuration

SettingDescription
PlaceholderText shown when the input is empty
WidthHorizontal size of the input field

​
State

The Input component automatically stores its value in the app’s state system. The state is structured as: 
{
  value: "user typed text"
}
This value can be accessed in code mode transforms using input('simple-input-abc') which returns { value }. See the State page for details on how state flows through your app.

​
Referencing in code mode

To use an Input’s value in a Table or Select transform: 
function transform(): { headers: string[]; rows: RowObject[] } {
  const searchInput = input('simple-input-abc');
  const data = query('users-query');

  // Filter rows based on user input
  const filtered = data.rows.filter(row =>
    String(row.name).toLowerCase().includes(searchInput.value.toLowerCase())
  );

  return {
    headers: data.columns,
    rows: filtered,
  };
}
Find the input’s slug in the “State” tab in the editor.

​
Example use cases

  • Search field — Filter table data based on user text
  • Form field — Collect user information