How to Fix “COMPONENTS_OUTSIDE_FORM” Error in Flow Configs on WhatsApp API

When building screens in your flow configuration, it’s tempting to drop input components like TextInput directly into the layout. But if your screen already contains a Form, all such components must be nested inside it.

Here’s what not to do:

{
  "type": "TextInput",
  "name": "path2",
  "label": "Path"
},
{
  "type": "Form",
  "name": "flow_path",
  "children": [
    {
      "type": "TextInput",
      "name": "path",
      "label": "Path"
    }
  ]
}

In the example above, the first TextInput is outside the Form, which will trigger the error:
COMPONENTS_OUTSIDE_FORM

Why This Happens

When a Form is present, all form components (anything that collects user input) are expected to be inside it. This ensures data validation, submission handling, and component grouping work correctly.

Correct Structure

Wrap all user input components inside the Form:

{
  "type": "Form",
  "name": "flow_path",
  "children": [
    {
      "type": "TextInput",
      "name": "path",
      "label": "Path"
    },
    {
      "type": "TextInput",
      "name": "path2",
      "label": "Path"
    }
  ]
}

This will resolve the error and ensure your form behaves as expected.

TL;DR

If you're using a Form component on a screen, all input components like TextInput, Select, Checkbox must be placed inside that Form. No input component should exist outside the Form. If you need multiple groups, consider structuring your UI with multiple screens or logic branches, not by placing components outside the form.

For more troubleshooting insights related to WhatsApp Business API, check out heltar.com/blogs.