# Configuration Forms

Every workflow component can have a **configuration form** -- a set of fields
that control its behavior. Configuration forms are generated dynamically by
the backend based on the component's plugin.

## Opening the configuration form

1. Click a node or edge on the canvas to select it.
2. The Property Panel opens on the right.
3. The configuration form appears below the label and annotation fields.

![Configuration form for an action component](../assets/screenshots/configuration-form.png){ .screenshot }

## Field types

Configuration forms can include the following field types:

| Field Type | Description |
|------------|-------------|
| **Text field** | Single-line text input. |
| **Text area** | Multi-line text input. |
| **Select list** | Dropdown with predefined options. |
| **Checkbox** | Boolean on/off toggle. |
| **Number** | Numeric input with optional min/max/step constraints. |
| **Markup** | Read-only informational text (not editable). |

## Required fields

Some fields are marked as **required**. You should fill these in before saving
your model. Required fields are indicated by the field's label or styling.

## Token support

Some configuration fields accept **tokens** -- placeholders for dynamic values
that are resolved during workflow execution (e.g., `[node:title]` for the
title of the current entity).

### How to use tokens

1. Load replay data or run a test to see available tokens in the Replay Panel.
2. Look for token values in the **Step Data** or **Global Tokens** sections.
3. Drag a token from the Replay Panel directly into a token-enabled
   configuration field.

### Visual indicators

During a token drag:

- **Eligible fields**: Glow with a border highlight to show they accept the
  token.
- **Non-eligible fields**: Dim to indicate they do not accept tokens.

### The "Replace tokens" checkbox

Some forms include a **Replace tokens** checkbox. When enabled, it makes
**all** fields in the form accept token drops, regardless of their individual
token support setting.

### Inline token editing

After dropping a token into a field, it appears as a styled pill (e.g.,
`[node:title]`). You can:

- **Edit**: Hover over the token and click the pencil icon, or press
  `Ctrl+E` / `Cmd+E` to open an inline editor.
- **Move**: Drag the token pill to reposition it within the same field.
- **Delete**: Select the token and press Delete or Backspace.

See [Tokens & Data](../replay/tokens.md) for the full token workflow.

## Form loading

When you select a component, the configuration form is loaded from the backend
via an API call. A loading indicator appears while the form is being fetched.
If the component has no configurable settings, no form is displayed.

## Validation

Form validation is handled by the backend when the model is saved. If
validation errors occur, they are displayed as messages in the toolbar area.
