How to Set Default Values in Retool Forms

Select a Text Input component inside your Form. In the Inspector's General section, find the Default Value field. Type a static string directly, for example 'New York'. This value will be pre-filled whenever the form first renders or is reset. For numeric inputs, enter the number. For Select components, enter the option's value string (not the label).

Create a Resource Query named getDefaults that fetches the default configuration record from your database. Enable 'Run on page load' in the query's Settings tab. Then select the input component and set its Default Value to {{ getDefaults.data[0].fieldName }}. Retool evaluates this expression once at component mount, after the query finishes. For the query to be available at mount time, it must have Run on page load enabled or be triggered before the component renders.

1-- SQL query: getDefaults
2SELECT default_country, default_currency, default_tax_rate
3FROM app_config
4LIMIT 1;
5
6// Default Value expression on currencySelect:
7{{ getDefaults.data[0].default_currency }}
8
9// Default Value expression on taxRateInput:
10{{ getDefaults.data[0].default_tax_rate }}

When users click a row in a Table component (table1) to edit a record, you want the edit form to pre-fill with that row's data. Select each input component and set its Default Value to the corresponding field on table1.selectedRow.data: {{ table1.selectedRow.data.first_name }} for firstNameInput, {{ table1.selectedRow.data.email }} for emailInput, and so on. Default Value re-evaluates when table1.selectedRow changes because Retool reactively re-mounts form inputs when their default changes.

1// Default Value expressions for edit form fields
2// firstNameInput:
3{{ table1.selectedRow.data.first_name }}
4
5// emailInput:
6{{ table1.selectedRow.data.email }}
7
8// roleSelect (must match an option value exactly):
9{{ table1.selectedRow.data.role }}
10
11// createdAtDatePicker:
12{{ table1.selectedRow.data.created_at }}

Retool exposes URL search parameters via {{ url.searchParams.paramName }}. This is useful for deep-linking into a form with pre-filled context. For example, if your app URL is /app/orders?customerId=42, set the Default Value of customerIdInput to {{ url.searchParams.customerId }}. You can also use this pattern to pre-select a dropdown: set a Select's Default Value to {{ url.searchParams.type }} and it will pre-select the option whose value matches the URL param.

1// Default Value for customerIdInput (from URL ?customerId=42)
2{{ url.searchParams.customerId }}
3
4// Default Value for typeSelect (from URL ?type=enterprise)
5{{ url.searchParams.type }}
6
7// Provide a fallback if the param might be absent:
8{{ url.searchParams.customerId || '' }}

For situations where Default Value expressions are insufficient — for example, when a button click should load a specific record — use form1.setData() in a JS Query. setData() takes an object whose keys match the component names inside the form. Create a JS Query named loadRecord. In the query, call await getRecord.trigger() to fetch the data, then call form1.setData() with the result. Note: setData() is synchronous but triggers re-render — if you need to read the updated value immediately after, add a small await utils.waitForNextTick() or read directly from the data source instead.

1// JS Query: loadRecord
2// Triggered by a 'Load for editing' button click
3
4await getRecord.trigger();
5
6const record = getRecord.data[0];
7
8form1.setData({
9  firstNameInput: record.first_name,
10  lastNameInput: record.last_name,
11  emailInput: record.email,
12  roleSelect: record.role,
13  activeSwitchInput: record.is_active,
14});

After a successful form submission, call form1.reset() to clear all inputs back to their Default Value expressions (not to empty). This is cleaner than clearing each field individually. Add form1.reset() to the success handler of your submitQuery. If you want to fully empty the form (ignoring defaults), set each Default Value to empty first or call setValue('') on each component.

1// JS Query: submitRecord
2// Success event handler calls form1.reset()
3
4try {
5  await insertRecord.trigger({
6    additionalScope: { data: form1.data }
7  });
8  utils.showNotification({
9    title: 'Saved',
10    description: 'Record created successfully.',
11    notificationType: 'success',
12  });
13  // Reset to defaults (not empty) for the next entry
14  form1.reset();
15} catch (err) {
16  utils.showNotification({
17    title: 'Error',
18    description: err.message,
19    notificationType: 'error',
20  });
21  throw err;
22}