From 469ba58eb76dc45308d134bfb5eacaa0a1acf3ee Mon Sep 17 00:00:00 2001
From: mhenrixon <mikael@mhenrixon.com>
Date: Sat, 11 Jul 2026 14:50:48 +0200
Subject: [PATCH] =?UTF-8?q?feat(component):=20instance-dynamic=20wire=20na?=
 =?UTF-8?q?mes=20=E2=80=94=20keyword=20escape=20hatches=20on=20the=20field?=
 =?UTF-8?q?-compiling=20helpers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A form builder's wire name is computed per instance (user[tags]), which
the class-level reactive_scope compile can't express — the gap that
forced phlex-forms' tag_field draft (mhenrixon/phlex-forms#6) onto raw
data attrs, losing render-time validation. Every field-compiling helper
now takes a verbatim keyword escape hatch (never re-scoped, validated at
render, mutually exclusive with the blessed field form):

- reactive_tags(name: "user[tags]")
- reactive_filter(input: "#tags_query") — a raw CSS selector for the
  deliberately NAME-LESS query input (re-blesses the kwarg removed in
  #186, narrowed to this escape-hatch purpose)
- nested_field_name(:items, :qty, scope: "order") — per-call prefix,
  wins over reactive_scope
- reactive_nested_list(:items, as: :json, name: "order[items]")

Server-side sugar only: the client already resolves these attributes as
arbitrary root-scoped selectors; existing calls emit a byte-identical
wire. Hardened beyond the plan after adversarial review: verbatim names
reject backslashes/control chars (a raw newline makes Chromium's
querySelectorAll throw during connect, breaking the whole root), and the
kwargs dispatch on nil-presence so `input: cond && "#sel"` with a false
condition fails loudly instead of emitting a silent dead binding.

## Test Coverage
- unit: verbatim compile, never-re-scoped under reactive_scope, blank/
  quote/backslash/control/boolean rejection, mutual exclusion, name:
  without as: :json, bracketed scope:
- system (Puma + Falcon): the form-builder-shaped demo — id-targeted
  name-less query input filters/adds/removes client-side; a real submit
  carries user[tags] comma-joined with ZERO stray params

## Verification
- [x] bundle exec rubocop passes (gem + docs app)
- [x] bundle exec rspec spec/phlex spec/requests — 1381 passed
- [x] bundle exec rspec spec/system — full suite green (Puma); new spec
      also green under CAPYBARA_SERVER=falcon
- [x] rake build:js_check — no client drift (no JS changes by design)

Closes #224
---
 CHANGELOG.md                                  |  20 ++
 README.md                                     |  46 ++++-
 .../views/docs/pages/draft_rows_new_parent.rb |  10 +
 lib/phlex/reactive/component/helpers.rb       | 161 ++++++++++++---
 .../components/form_tags_field_component.rb   | 110 +++++++++++
 .../dummy/app/controllers/demos_controller.rb |  13 ++
 spec/dummy/config/routes.rb                   |   2 +
 spec/phlex/reactive/component_spec.rb         | 186 +++++++++++++++++-
 spec/system/tags_field_form_spec.rb           |  85 ++++++++
 9 files changed, 602 insertions(+), 31 deletions(-)
 create mode 100644 spec/dummy/app/components/form_tags_field_component.rb
 create mode 100644 spec/system/tags_field_form_spec.rb

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0dcc774..1de2f1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,26 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+- **Instance-dynamic wire names — keyword escape hatches on the
+  field-compiling helpers (#224).** A form builder's wire name is computed per
+  instance (`user[tags]`), which the class-level `reactive_scope` compile can't
+  express — the gap that forced phlex-forms' `tag_field` draft
+  (mhenrixon/phlex-forms#6) onto raw data attrs. Every helper that compiles a
+  field name now takes a verbatim keyword escape hatch (never re-scoped,
+  validated at render, mutually exclusive with the blessed field form):
+  `reactive_tags(name: "user[tags]")`, `reactive_filter(input: "#tags_query")`
+  (a raw CSS selector — the deliberately **name-less** query input inside a
+  real form, targeted by id, so it can never submit a stray param),
+  `nested_field_name(:items, :qty, scope: "order")` (a per-call parent prefix
+  that wins over `reactive_scope`), and
+  `reactive_nested_list(:items, as: :json, name: "order[items]")` (the hidden
+  JSON sync field, JSON mode only). Server-side sugar only — the client already
+  resolves these attributes as arbitrary root-scoped selectors; the shipped
+  wire for existing calls is byte-identical. Note: `reactive_filter(input:)`
+  deliberately re-blesses the kwarg removed in #186 — the field form stays the
+  blessed default, and a pre-0.10 `input:`/`option:` call shape is valid again
+  with identical semantics instead of raising the removal error.
+
 - **Project board — the kanban flagship demo (#216).** A live three-lane board
   on the docs site (`/docs/example-project-board`, `/demos/project-board`)
   composing the toolkit end to end: each card is its own nested reactive root
diff --git a/README.md b/README.md
index 3111116..a0df455 100644
--- a/README.md
+++ b/README.md
@@ -390,17 +390,17 @@ Use in controllers: `render turbo_stream: Counter.replace(counter)`.
 | `reactive_text(:name, initial)` | Mirror a compute output (or a declared input) into a **text node** — a live preview heading, a character counter, `"Hello, {name}"` — via `textContent` (XSS-safe). The text sibling of `reactive_field`; carries no `name`, so it's never POSTed. See [Client-side computes](#client-side-computes-reactive_compute--reactive_text). |
 | `reactive_show(if:/if_any:/unless:)` | **Value-conditional visibility** (the `x-show`/`data-show` case): spread onto the element to show/hide — it toggles `hidden` from the fields' **current values**, client-only, zero round trip. One conditions language: a **Hash is an AND**, an **Array is membership**, a **Range is a threshold**, `if_any:` is OR-of-AND, `unless:` negates. `reactive_values` computes first paint; `disable:` disables a hidden section's controls. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
 | `reactive_show_targets(:field, "#id" => value)` | **Cross-root visibility**: the component that owns the field declares which **outside**, id-allowlisted elements it governs (a nav tab, a panel in another pane) — the visibility parallel of `mirror:`. Spread on the **root** via `mix(reactive_root, …)`, **once per root** — several fields go in one call via the hash form. The value uses the same `where`-style vocabulary (`"advanced"`, `%w[a b]`, `10..`); a `"#id"` **key** takes a full conditions Hash for a **multi-field** predicate (`"#warn" => { if: { type: "trade", price: ..0 } }`). Id selectors only (raise at render + client warn-skip); toggles `hidden` only. See [Value-conditional visibility](#value-conditional-visibility-reactive_show). |
-| `reactive_filter(:field, option: nil, group: nil, empty: nil)` | **Client-side option filtering** for a preloaded combobox: spread onto the root and name the **field** that drives it — `reactive_filter(:q)` compiles `:q` to `[name="q"]` (scope-aware) and typing shows/hides the options by their `data-reactive-filter-text` haystack, **zero round trips**. `option:` defaults to `[role=option]`; optional `group:` collapses an all-hidden group header; `empty:` reveals a no-matches node. See [Client-side option filtering](#client-side-option-filtering-reactive_filter). |
+| `reactive_filter(:field, option: nil, group: nil, empty: nil)` | **Client-side option filtering** for a preloaded combobox: spread onto the root and name the **field** that drives it — `reactive_filter(:q)` compiles `:q` to `[name="q"]` (scope-aware) and typing shows/hides the options by their `data-reactive-filter-text` haystack, **zero round trips**. `option:` defaults to `[role=option]`; optional `group:` collapses an all-hidden group header; `empty:` reveals a no-matches node. `input:` is the escape hatch — a raw CSS selector for a **name-less** driving input (`input: "#tags_query"`), the form-builder case. See [Client-side option filtering](#client-side-option-filtering-reactive_filter). |
 | `reactive_listnav("[role=option]")` | The **standalone** combobox keyboard wiring (Arrow/Enter/Escape) for an input that fires **no action** — the preload-and-filter case. Same behavior as `on(…, listnav:)`, minus the POST. |
-| `reactive_tags(:tags)` | **Tag-chip input** (the combobox/tags widget): spread onto the root and name the hidden field that stores the **comma-joined** value — the client maintains that field + the chip list entirely client-side (form state, zero round trips), rebuilding chips from your server-owned `<template>`. Composes with `reactive_filter` (type to narrow) and `reactive_listnav` (Enter picks the highlighted option). See [Tag-chip input](#tag-chip-input-reactive_tags). |
+| `reactive_tags(:tags)` | **Tag-chip input** (the combobox/tags widget): spread onto the root and name the hidden field that stores the **comma-joined** value — the client maintains that field + the chip list entirely client-side (form state, zero round trips), rebuilding chips from your server-owned `<template>`. Composes with `reactive_filter` (type to narrow) and `reactive_listnav` (Enter picks the highlighted option). `name:` is the escape hatch — a **verbatim** wire name (`name: "user[tags]"`, never re-scoped), the form-builder case. See [Tag-chip input](#tag-chip-input-reactive_tags). |
 | `reactive_tags_add` / `reactive_tags_option(tag)` / `reactive_tags_remove(tag)` | The tags triggers, all **client-only**: `reactive_tags_add` on the query input adds the typed text on Enter (mix it **after** `reactive_listnav`; Enter never submits the enclosing form); `reactive_tags_option` makes a preloaded suggestion add its declared tag on click; `reactive_tags_remove` is a chip's remove button (no arg inside the template — the client fills the tag per chip). |
 | `reactive_compute :name, inputs: { title: :string, qty: :number }, outputs:` | **Typed** inputs: a `:string` reaches the JS reducer raw, a `:number` is coerced through `Number`. The array form (`inputs: %i[a b]`) stays all-numeric; the **permit-style** form (`inputs: [:qty, title: :string]`) mixes both — bare symbols default `:number`, a trailing hash types the exceptions. `outputs:` is the field allowlist; a reducer-result key also paints any owned `reactive_text` node by presence and any `mirror:` id, so an `outputs:` entry that exists only to reach a text node is redundant (harmless — a widening). |
 | `reactive_compute :name, ..., mirror: { sum: "#summary-sum" }` | **Cross-root text mirrors**: paint a compute value into declared, id-allowlisted nodes **outside** the reactive root (a recap in another tab pane) via `textContent` — no bespoke listener. See [Cross-root mirrors](#cross-root-mirrors-mirror--painting-a-recap-outside-the-root). |
 | `reactive_dirty` / `reactive_dirty warn_unsaved: true` / `reactive_dirty only: %i[...]` | **Dirty tracking**, declared once at the class level, against the DOM's own `defaultValue`/`defaultChecked`/`defaultSelected` — no client state. Marks changed fields + the root `data-reactive-dirty`; `warn_unsaved:` arms a `beforeunload`/`turbo:before-visit` guard; `only:` scopes tracking to named fields. Style with `[data-reactive-dirty]`. See [Dirty-field tracking](#dirty-field-tracking-reactive_dirty). |
 | `nested_update!(:assoc, attrs)` | Map a nested param onto `<assoc>_attributes` with id preservation; update the record. |
-| `reactive_nested_list(:assoc, as: :attributes \| :json)` / `reactive_nested_template(:assoc)` / `reactive_nested_row` | **Draft nested-attribute rows** (the "new parent + child rows" form): the container rows land in, the `<template>` holding ONE row's markup, and the row wrapper marker — all **client-only** form state, keyed by association (several collections per root). `as: :json` (default `:attributes`) serializes the rows into ONE hidden JSON field instead of posting `accepts_nested_attributes_for` names — for an app whose controller `JSON.parse`s a serialized param. See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
+| `reactive_nested_list(:assoc, as: :attributes \| :json)` / `reactive_nested_template(:assoc)` / `reactive_nested_row` | **Draft nested-attribute rows** (the "new parent + child rows" form): the container rows land in, the `<template>` holding ONE row's markup, and the row wrapper marker — all **client-only** form state, keyed by association (several collections per root). `as: :json` (default `:attributes`) serializes the rows into ONE hidden JSON field instead of posting `accepts_nested_attributes_for` names — for an app whose controller `JSON.parse`s a serialized param; `name:` names that hidden field **verbatim** (`name: "order[todos]"`, never re-scoped — the form-builder escape hatch, JSON mode only). See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
 | `reactive_nested_add(:assoc, from:, clear:)` / `reactive_nested_remove(confirm:)` | The row triggers, client-only (zero round trips): add clones the template and renumbers its placeholder index; remove deletes a draft row from the DOM, or `_destroy`-marks + hides a persisted row (a hidden `[_destroy]` input present). **Fill-then-add**: `from: { row_field => "#source-selector" }` seeds the new row from add controls that live OUTSIDE it (a preset select, a typeahead), and `clear: true` resets them — composes with `as: :attributes` AND `as: :json`. **Confirm on remove**: `reactive_nested_remove(confirm: "Really delete this row?")` gates the remove behind the same overridable `confirmResolver` as `on`/`on_client` (a per-row string, or the conditional `{ when:, message: }` Hash). See [Draft rows for a new parent](#draft-rows-for-a-new-parent-reactive_nested_). |
-| `nested_field_name(:assoc, :field, index: nil)` | The Rails `accepts_nested_attributes_for` wire name for one row field — `order[line_items_attributes][NEW_ROW][quantity]` (the template placeholder) by default, a real index when given. Scope-aware under `reactive_scope`. |
+| `nested_field_name(:assoc, :field, index: nil)` | The Rails `accepts_nested_attributes_for` wire name for one row field — `order[line_items_attributes][NEW_ROW][quantity]` (the template placeholder) by default, a real index when given. Scope-aware under `reactive_scope`; `scope:` overrides it **per call** (`scope: "order"`, verbatim — the form-builder escape hatch). |
 | `reactive_collection :name, item:, container:, count:, empty:, size:` | Declare an add/remove-row list once; actions call `reply.append`/`prepend`/`remove`. See [Reactive collections](#reactive-collections-addremove-rows--count--empty-state). |
 | `reply.replace` / `.morph` / `.update` / `.remove` / `.redirect(url)` / `.with(*)` / `.js(ops)` | Return from an action to control the reply (flash, remove, redirect, multi-stream, server-pushed client ops). See [Controlling the action's reply](#reply--controlling-the-actions-reply). |
 | `reply.append(name, model)` / `.prepend(...)` / `.remove(name, model)` | Add/remove a row in a declared `reactive_collection` (row + count + empty-state in one reply). |
@@ -1218,6 +1218,17 @@ stays its own signed `on(:select)` trigger. Only *filtering* is client-side —
 selection still round-trips as a real signed action. Blank selectors raise at
 render: a dead binding must fail loudly, not no-op in the browser.
 
+**The escape hatch — a name-less input, targeted by id.** Inside a real
+POST/GET form, a *named* query input submits a stray param alongside your
+value. A form builder (phlex-forms' `tag_field`) therefore renders the query
+input with an **id and no `name`** — which the field form can't express. Pass
+`input:` (a raw CSS selector, verbatim — never re-scoped) instead of the field;
+exactly one of the two per call:
+
+```ruby
+reactive_filter(input: "#user_tags_query")   # the input carries id, NO name
+```
+
 ### Tag-chip input (`reactive_tags`)
 
 The composed combobox/tags widget: preload suggestions, type to narrow, Enter or
@@ -1272,7 +1283,23 @@ dispatches a real `input` event on the hidden field, so `reactive_dirty`,
 
 The styled, form-builder-integrated version of this widget (label/errors/
 theming) belongs in your form layer — these helpers are deliberately the
-unstyled primitives, like `reactive_filter` before them.
+unstyled primitives, like `reactive_filter` before them. That form layer is
+exactly who needs the **escape hatches**: a form builder's wire name is
+computed **per instance** (`user[tags]`, from the builder's object name), which
+the class-level `reactive_scope` compile can't express. `name:` takes the wire
+name **verbatim** (never re-scoped), and the query input goes name-less,
+targeted by id via `reactive_filter(input:)` — so a real form submit carries
+`user[tags]` and nothing else:
+
+```ruby
+div(**mix(reactive_root(id: "user_tags_widget"),
+  reactive_tags(name: "user[tags]"),               # verbatim — never re-scoped
+  reactive_filter(input: "#user_tags_query"))) do  # id-targeted, name-less input
+  input(type: :hidden, name: "user[tags]", id: "user_tags", value: @tags.join(","))
+  # …chips/template/suggestions as above…
+  input(id: "user_tags_query", type: "search", **mix(reactive_listnav, reactive_tags_add))
+end
+```
 
 ### Draft rows for a new parent (`reactive_nested_*`)
 
@@ -1346,6 +1373,12 @@ it on save. Several collections can share one root (everything is keyed by the
 association name); nesting a collection inside another's template is not
 supported.
 
+`nested_field_name` is scope-aware (`reactive_scope :order` → the
+`order[…]` wrap above). When the parent prefix is **per-instance** — a form
+builder's object name, possibly itself bracketed (`"user[profile]"`) — pass
+`scope:` per call instead; it's used verbatim and wins over the class-level
+scope: `nested_field_name(:line_items, :quantity, scope: "order")`.
+
 Two boundaries to respect: the DOM is the single source of truth for unsent
 draft rows, so a **server re-render of the root replaces them** — keep
 replace-shaped actions out of a root holding unsent rows. And once the parent
@@ -1363,6 +1396,9 @@ path exactly as it is:
 div(**reactive_nested_list(:line_items, as: :json)) { }   # + a hidden field to sync
 # the hidden field the client keeps in sync (seed "[]" so an empty submit posts one):
 input(type: "hidden", **reactive_field(:line_items), value: "[]")
+
+# Form-builder escape hatch: name the hidden field VERBATIM (never re-scoped):
+div(**reactive_nested_list(:line_items, as: :json, name: "order[line_items]")) { }
 ```
 
 ```ruby
diff --git a/docs/app/views/docs/pages/draft_rows_new_parent.rb b/docs/app/views/docs/pages/draft_rows_new_parent.rb
index 71a3fdd..a99d6b1 100644
--- a/docs/app/views/docs/pages/draft_rows_new_parent.rb
+++ b/docs/app/views/docs/pages/draft_rows_new_parent.rb
@@ -121,6 +121,12 @@ def row_fields(index: nil)
               `order[line_items_attributes][3][quantity]` (a server-rendered row) —
               the scope wraps the `line_items_attributes` base, never the whole
               bracketed path.
+
+              When the parent prefix is **per-instance** — a form builder's
+              object name, possibly itself bracketed (`"user[profile]"`) — pass
+              `scope:` per call instead: it is used verbatim and wins over the
+              class-level scope
+              (`nested_field_name(:line_items, :quantity, scope: 'order')`).
             MD
           end
         end
@@ -166,6 +172,10 @@ def json_mode
 
               template(**reactive_nested_template(:line_items)) { row_fields }
               button(**reactive_nested_add(:line_items)) { 'Add item' }
+
+              # Form-builder escape hatch: name the hidden field VERBATIM
+              # (never re-scoped) when the wire name is computed per instance:
+              div(**reactive_nested_list(:line_items, as: :json, name: 'order[line_items]')) { }
               ```
 
               The row markup is unchanged — the same `<template>`, the same
diff --git a/lib/phlex/reactive/component/helpers.rb b/lib/phlex/reactive/component/helpers.rb
index b33db50..85be6d0 100644
--- a/lib/phlex/reactive/component/helpers.rb
+++ b/lib/phlex/reactive/component/helpers.rb
@@ -601,20 +601,35 @@ def reactive_show(field = nil, **options)
         # hidden options) and each option's own on(:select, …) trigger —
         # selection still round-trips as a signed action; only FILTERING is
         # local. Blank selectors raise: a dead binding must fail at render.
-        def reactive_filter(field = nil, input: :__removed, option: nil, group: nil, empty: nil)
-          # Issue #186: the four-selector kwarg form is removed — name the FIELD that
-          # drives the filter instead. A leftover input: means the old call shape.
-          unless input == :__removed
+        #
+        # Issue #224: `input:` is the ESCAPE HATCH — a raw CSS selector for the
+        # one driving input the field form can't express: a deliberately
+        # NAME-LESS query input inside a real POST form (a named input would
+        # submit a stray param), targeted by id. A form builder (phlex-forms'
+        # tag_field) computes that id per instance. Verbatim, never re-scoped;
+        # exactly one of field/input: per call — the field form stays the
+        # blessed default:
+        #   reactive_filter(input: "#user_tags_query")
+        def reactive_filter(field = nil, input: nil, option: nil, group: nil, empty: nil)
+          # nil-presence, NOT truthiness: `input: cond && "#sel"` with cond false
+          # must fail loudly in filter_selector! below (a boolean is never a
+          # selector), never slip into the field branch and emit a dead binding.
+          if field && !input.nil?
+            raise ArgumentError,
+              "reactive_filter takes ONE driving-input form — a field name (reactive_filter(:q), " \
+              "scope-aware) OR input: (a raw CSS selector for a name-less input), not both"
+          end
+          if field.nil? && input.nil?
             raise ArgumentError,
-              "reactive_filter(input:) was removed in issue #186 — name the driving field: " \
-              "reactive_filter(:q) (compiles to [name=\"q\"], scope-aware; option defaults to [role=option])."
+              "reactive_filter needs a field name — reactive_filter(:q) — or the input: " \
+              "escape hatch (a raw CSS selector, e.g. input: \"#tags_query\")"
           end
-          raise ArgumentError, "reactive_filter needs a field name — reactive_filter(:q)" if field.nil?
 
           data = {
             # Compile the field to a scoped [name="…"] selector (same scope convention
-            # reactive_field uses, so the filter input aligns with its own field).
-            reactive_filter_input: %([name="#{scoped_field_name(field)}"]),
+            # reactive_field uses, so the filter input aligns with its own field) — or
+            # take the input: selector verbatim (issue #224).
+            reactive_filter_input: input.nil? ? %([name="#{scoped_field_name(field)}"]) : filter_selector!(:input, input),
             # option defaults to the [role=option] convention; a kwarg overrides it.
             reactive_filter_option: option ? filter_selector!(:option, option) : "[role=option]"
           }
@@ -680,9 +695,30 @@ def reactive_listnav(option_selector = "[role=option]")
         # and reactive_listnav (Arrow/Enter/Escape; Enter picks the highlighted
         # option via its own tagsPick trigger, and reactive_tags_add only adds
         # the TYPED text when nothing is highlighted — no double add).
-        def reactive_tags(field = nil)
+        #
+        # Issue #224: `name:` is the ESCAPE HATCH for an instance-dynamic wire
+        # name — a form builder (phlex-forms' tag_field) computes "user[tags]"
+        # per instance, which the class-level reactive_scope compile can't
+        # express. Verbatim, NEVER re-scoped (reactive_field's explicit-name
+        # precedent); exactly one of field/name: per call:
+        #   reactive_tags(name: "user[tags]")
+        def reactive_tags(field = nil, name: nil)
+          # nil-presence, NOT truthiness: `name: cond && "user[tags]"` with cond
+          # false must fail loudly in verbatim_name_selector!, never silently
+          # fall through to the field branch.
+          unless name.nil?
+            if field
+              raise ArgumentError,
+                "reactive_tags takes ONE field form — a field name (reactive_tags(:tags), scope-aware) " \
+                "OR name: (a verbatim wire name, never re-scoped), not both"
+            end
+            return { data: { reactive_tags_field: verbatim_name_selector!(:reactive_tags, name) } }
+          end
+
           if field.nil? || field.to_s.strip.empty?
-            raise ArgumentError, "reactive_tags needs a field name — reactive_tags(:tags)"
+            raise ArgumentError,
+              "reactive_tags needs a field name — reactive_tags(:tags) — or the name: " \
+              "escape hatch (a verbatim wire name, e.g. name: \"user[tags]\")"
           end
 
           # Compile the field to a scoped [name="…"] selector, the reactive_filter
@@ -785,7 +821,15 @@ def reactive_tags_remove(tag = nil)
         # a `reactive_scope :order` component emits
         # order[line_items_attributes][3][quantity] (never a nested-bracket
         # corruption of the scope wrap).
-        def nested_field_name(association, field, index: NESTED_NEW_ROW)
+        #
+        # Issue #224: `scope:` is the per-call ESCAPE HATCH — a form builder's
+        # object name is per-instance ("order", or itself bracketed for a
+        # nested fieldset: "user[profile]"), which the class-level
+        # reactive_scope can't express. Used verbatim as the wrap and WINS over
+        # reactive_scope:
+        #   nested_field_name(:line_items, :quantity, scope: "order")
+        #   # => order[line_items_attributes][NEW_ROW][quantity]
+        def nested_field_name(association, field, index: NESTED_NEW_ROW, scope: nil)
           nested_identifier!(:nested_field_name, :association, association)
           nested_identifier!(:nested_field_name, :field, field)
           unless index.to_s == NESTED_NEW_ROW || index.to_s.match?(/\A\d+\z/)
@@ -794,7 +838,9 @@ def nested_field_name(association, field, index: NESTED_NEW_ROW)
               "got #{index.inspect} — anything else corrupts the bracketed wire name"
           end
 
-          "#{scoped_field_name(:"#{association}_attributes")}[#{index}][#{field}]"
+          base = :"#{association}_attributes"
+          prefix = scope.nil? ? scoped_field_name(base) : "#{nested_scope!(scope)}[#{base}]"
+          "#{prefix}[#{index}][#{field}]"
         end
 
         # The container cloned rows land in — one per association, inside the
@@ -810,10 +856,23 @@ def nested_field_name(association, field, index: NESTED_NEW_ROW)
         # naming the hidden field the client mirrors the rows into on every
         # add/remove/input. The default (:attributes) is unchanged — the plain
         # accepts_nested_attributes_for wire.
-        def reactive_nested_list(association, as: :attributes)
-          name = nested_identifier!(:reactive_nested_list, :association, association)
-          data = { reactive_nested_list: name }
-          return { data: } if as == :attributes
+        #
+        # Issue #224: `name:` is the verbatim ESCAPE HATCH for that hidden
+        # field's wire name — a form builder's "order[todos]" the class-level
+        # reactive_scope compile can't express. JSON-mode only (the
+        # :attributes mode has no field to name); never re-scoped:
+        #   reactive_nested_list(:todos, as: :json, name: "order[todos]")
+        def reactive_nested_list(association, as: :attributes, name: nil)
+          assoc = nested_identifier!(:reactive_nested_list, :association, association)
+          data = { reactive_nested_list: assoc }
+          if as == :attributes
+            unless name.nil?
+              raise ArgumentError,
+                "reactive_nested_list(name:) only applies to as: :json — it names the hidden JSON " \
+                "sync field; the :attributes mode has no field to name"
+            end
+            return { data: }
+          end
 
           unless as == :json
             raise ArgumentError,
@@ -824,9 +883,17 @@ def reactive_nested_list(association, as: :attributes)
           # JSON mode: mark the container and name the hidden field the client
           # keeps in sync — a scope-aware [name="…"] selector, the same
           # convention reactive_tags/reactive_filter use so the field resolves
-          # under reactive_scope too.
-          data[:reactive_nested_json] = name
-          data[:reactive_nested_json_field] = %([name="#{scoped_field_name(association)}"])
+          # under reactive_scope too. name: takes the wire name verbatim
+          # (issue #224).
+          data[:reactive_nested_json] = assoc
+          # nil-presence, NOT truthiness (the reactive_tags rationale): a falsy
+          # non-nil name: must fail loudly in verbatim_name_selector!.
+          data[:reactive_nested_json_field] =
+            if name.nil?
+              %([name="#{scoped_field_name(association)}"])
+            else
+              verbatim_name_selector!(:reactive_nested_list, name)
+            end
           { data: }
         end
 
@@ -1109,10 +1176,12 @@ def nested_update!(association, attrs, **extra)
         # A reactive_filter/reactive_listnav selector, validated non-blank and
         # stringified (issue #163). A blank selector is a dead binding — the
         # client would silently match nothing — so it fails loudly at render,
-        # like reactive_show's predicate validation.
+        # like reactive_show's predicate validation. A boolean is rejected too
+        # (issue #224): `input: cond && "#sel"` with cond false would otherwise
+        # stringify to the plausible-looking dead selector "false".
         def filter_selector!(name, value)
           selector = value.to_s
-          if selector.strip.empty?
+          if value == true || value == false || selector.strip.empty?
             raise ArgumentError,
               "reactive_filter/reactive_listnav #{name}: needs a CSS selector, got #{value.inspect}"
           end
@@ -1135,6 +1204,54 @@ def tags_tag!(helper, tag)
           value
         end
 
+        # A verbatim wire name for the name:-form escape hatches (issue #224) —
+        # an instance-dynamic name (a form builder's "user[tags]") used exactly
+        # as given, never re-scoped. The name is interpolated into a
+        # double-quoted [name="…"] attribute selector the CLIENT passes to
+        # querySelectorAll, so anything that breaks a CSS string breaks the
+        # binding IN THE BROWSER: a `"` ends the string early, a `\` CSS-escapes
+        # (a trailing one swallows the closing quote — the selector silently
+        # matches the wrong name), and a raw control character (newline) makes
+        # querySelectorAll THROW, aborting the controller's connect. All fail
+        # loudly here at render instead. Booleans are rejected with the blank
+        # check: `name: cond && "user[tags]"` with cond false must never
+        # compile the plausible-looking [name="false"].
+        def verbatim_name_selector!(helper, name)
+          value = name.to_s
+          if name == true || name == false || value.strip.empty?
+            raise ArgumentError,
+              "#{helper} name: needs a non-blank wire name (e.g. name: \"user[tags]\"), got #{name.inspect}"
+          end
+          if value.match?(/["\\\x00-\x1f]/)
+            raise ArgumentError,
+              "#{helper} name: can't contain a double quote, backslash, or control character — " \
+              "the name is compiled into a [name=\"…\"] selector the client queries with, " \
+              "got #{name.inspect}"
+          end
+
+          %([name="#{value}"])
+        end
+
+        # The per-call scope: override for nested_field_name (issue #224) — a
+        # form builder's parent prefix, possibly itself bracketed
+        # ("user[profile]"), validated non-blank. Used verbatim as the wrap.
+        # String/Symbol only: `scope: cond && "order"` with cond false would
+        # otherwise stringify to the silently-corrupting "false[…]" wire name.
+        def nested_scope!(scope)
+          unless scope.is_a?(String) || scope.is_a?(Symbol)
+            raise ArgumentError,
+              "nested_field_name scope: needs a String or Symbol parent prefix " \
+              "(e.g. scope: \"order\"), got #{scope.inspect}"
+          end
+
+          value = scope.to_s
+          return value unless value.strip.empty?
+
+          raise ArgumentError,
+            "nested_field_name scope: needs a non-blank parent prefix (e.g. scope: \"order\"), " \
+            "got #{scope.inspect}"
+        end
+
         # An association/field name for the nested-rows wire (issue #208),
         # validated to a plain Ruby identifier at render — it becomes an
         # attribute value, a CSS selector fragment, AND a bracketed param name,
diff --git a/spec/dummy/app/components/form_tags_field_component.rb b/spec/dummy/app/components/form_tags_field_component.rb
new file mode 100644
index 0000000..391a9ec
--- /dev/null
+++ b/spec/dummy/app/components/form_tags_field_component.rb
@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+# The FORM-BUILDER shape of the tag-chip input (issue #224) — the exact
+# composition a form-builder gem (phlex-forms' tag_field) renders, where the
+# wire name is computed PER INSTANCE and so can't go through the class-level
+# reactive_scope compile:
+#
+#   * reactive_tags(name: "user[tags]") — the VERBATIM bracketed wire name of
+#     the hidden comma-joined field (never re-scoped).
+#   * reactive_filter(input: "#user_tags_query") — the query input is targeted
+#     BY ID and carries NO name: inside a real POST/GET form, a named query
+#     input would submit a stray param alongside the value.
+#
+# Same client behavior as TagsFieldComponent (the blessed-form demo): the chip
+# list is a client projection of the hidden field, adds/removes round-trip
+# nothing, and the enclosing form's GET submit carries user[tags] back — the
+# page echoes it AND lists any stray params, proving the name-less input
+# contributed nothing.
+class FormTagsFieldComponent < ApplicationComponent
+  include Phlex::Reactive::ClientBindings
+
+  # tag => haystack (synonyms included — "db" finds Postgres).
+  SUGGESTIONS = {
+    "Ruby" => "ruby language backend",
+    "Postgres" => "postgres database db sql",
+    "Hotwire" => "hotwire turbo stimulus frontend"
+  }.freeze
+
+  def initialize(tags: "", submitted: false, stray_params: [])
+    # A form builder derives both per instance: object name + attribute.
+    @name = "user[tags]"
+    @id = "user_tags"
+    @tags = tags.to_s.split(",").map(&:strip).reject(&:empty?)
+    @submitted = submitted
+    @stray_params = stray_params
+  end
+
+  def view_template
+    div(**mix(
+      # A ClientBindings root has no #id — name it explicitly.
+      reactive_root(id: "#{@id}_widget", data: { testid: "form-tags-field" }),
+      reactive_tags(name: @name),
+      reactive_filter(input: "##{@id}_query", empty: "#form-tags-empty")
+    )) do
+      form(action: "/form_tags_field", method: "get", data: { turbo: false }) do
+        input(type: :hidden, name: @name, id: @id, value: @tags.join(","), data: { testid: "form-tags-value" })
+        chips
+        chip_template
+        query_input
+        suggestions
+        div(id: "form-tags-empty", hidden: true) { "No matches" }
+        button(type: "submit", data: { testid: "form-tags-submit" }) { "Save" }
+      end
+      echo if @submitted
+    end
+  end
+
+  private
+
+  # Server-rendered first paint of the current tags — the SAME markup the
+  # template chip carries, so the client's connect-time rebuild is invisible.
+  def chips
+    div(data: { reactive_tags_list: true, testid: "form-tags-chips" }) do
+      @tags.each { chip(it) }
+    end
+  end
+
+  def chip(tag = nil)
+    span(class: "chip", data: { reactive_tag: tag, testid: "form-tag-chip" }) do
+      span(data: { reactive_tag_text: true }) { tag }
+      button(**(tag ? reactive_tags_remove(tag) : reactive_tags_remove), aria: { label: "Remove #{tag}" }) { "×" }
+    end
+  end
+
+  def chip_template
+    template(data: { reactive_tags_template: true }) { chip }
+  end
+
+  # The query input carries an ID and NO name — reactive_filter(input:) finds
+  # it by id, and the enclosing form's submit can never pick it up as a param.
+  def query_input
+    input(**mix(
+      reactive_listnav,
+      reactive_tags_add,
+      id: "#{@id}_query", type: "search", autocomplete: "off",
+      placeholder: "Add a tag…", data: { testid: "form-tags-query" }
+    ))
+  end
+
+  # `tag`/`haystack` are explicit params (NOT `it`): the body nests Phlex
+  # blocks, where a bare `it` would resolve to the wrong receiver.
+  def suggestions
+    div do
+      SUGGESTIONS.each do |tag, haystack|
+        button(**mix(
+          reactive_tags_option(tag),
+          data: { reactive_filter_text: haystack, testid: "form-option-#{tag.downcase}" }
+        )) { tag }
+      end
+    end
+  end
+
+  # The submit echo: the received value plus every query param that ISN'T
+  # user[…] — the system spec asserts this stays empty (the name-less query
+  # input contributed no stray param).
+  def echo
+    div(data: { testid: "form-tags-submitted" }) { "Saved: #{@tags.join(",")}" }
+    div(data: { testid: "form-tags-stray" }) { @stray_params.sort.join(",") }
+  end
+end
diff --git a/spec/dummy/app/controllers/demos_controller.rb b/spec/dummy/app/controllers/demos_controller.rb
index 4cff875..08503bc 100644
--- a/spec/dummy/app/controllers/demos_controller.rb
+++ b/spec/dummy/app/controllers/demos_controller.rb
@@ -108,6 +108,19 @@ def tags_field
     render_component TagsFieldComponent.new(tags: params[:tags].to_s, submitted: params.key?(:tags))
   end
 
+  # The form-builder shape of the tag-chip input (issue #224): a VERBATIM
+  # bracketed wire name (reactive_tags(name: "user[tags]")) and an id-targeted,
+  # name-less query input (reactive_filter(input:)). The GET submit proves the
+  # wire: user[tags] arrives comma-joined, and stray_params lists every query
+  # key that isn't user[…] — the spec asserts it stays empty.
+  def form_tags_field
+    render_component FormTagsFieldComponent.new(
+      tags: params.dig(:user, :tags).to_s,
+      submitted: params.key?(:user),
+      stray_params: request.query_parameters.keys - ["user"]
+    )
+  end
+
   # A NEW (unsaved) order: the split recomputes in-browser via reactive_compute,
   # no round trip. total=500 seeds the three-way split. The page also carries a
   # read-only recap OUTSIDE the reactive root (issue #159) — the component's
diff --git a/spec/dummy/config/routes.rb b/spec/dummy/config/routes.rb
index 460eb58..a6622ec 100644
--- a/spec/dummy/config/routes.rb
+++ b/spec/dummy/config/routes.rb
@@ -19,6 +19,8 @@
   get "combobox" => "demos#combobox"
   get "filter_combobox" => "demos#filter_combobox"
   get "tags_field" => "demos#tags_field"
+  # Issue #224: the form-builder shape — verbatim name: + id-targeted input:.
+  get "form_tags_field" => "demos#form_tags_field"
   get "new_order" => "demos#new_order"
   get "order/:id" => "demos#order"
   # Issue #208: the draft nested-attribute rows form + its reconcile endpoint.
diff --git a/spec/phlex/reactive/component_spec.rb b/spec/phlex/reactive/component_spec.rb
index 2b4270d..55fde5c 100644
--- a/spec/phlex/reactive/component_spec.rb
+++ b/spec/phlex/reactive/component_spec.rb
@@ -2175,7 +2175,9 @@ def view_template
   # selectors. `reactive_filter(:q)` compiles `:q` to [name="q"] (scope-aware) for
   # the input, defaults option to the [role=option] convention, and leaves
   # group/empty opt-in. The client wire (selectors) is unchanged — a server-only
-  # compile. The old input:/option: kwarg form raises a guided error.
+  # compile. Issue #224 re-blesses input: as the ESCAPE HATCH (a raw CSS
+  # selector) for the one case the field form can't express: a deliberately
+  # name-less query input inside a real POST form, targeted by id.
   describe "#reactive_filter (field-driven, issue #186)" do
     subject(:instance) { filter_klass.new }
 
@@ -2220,9 +2222,55 @@ def self.name = "ScopedFilter"
       expect(attrs[:data][:reactive_filter_empty]).to eq("#no-matches")
     end
 
-    it "raises a guided error for the removed input: kwarg form" do
-      expect { instance.send(:reactive_filter, input: "#search", option: "[role=option]") }
-        .to raise_error(ArgumentError, /reactive_filter\(:field\)|field/)
+    # Issue #224: input: returns as the ESCAPE HATCH — a raw CSS selector for
+    # an instance-dynamic driving input the field form can't express: a form
+    # builder's NAME-LESS query input (a named input inside a real POST form
+    # would submit a stray param), targeted by id. The field form stays the
+    # blessed default; exactly one of the two forms per call.
+    context "with the input: escape hatch (issue #224)" do
+      it "emits the selector verbatim (+ the option convention)" do
+        attrs = instance.send(:reactive_filter, input: "#tags_query")
+        expect(attrs[:data][:reactive_filter_input]).to eq("#tags_query")
+        expect(attrs[:data][:reactive_filter_option]).to eq("[role=option]")
+      end
+
+      it "never re-scopes the selector under reactive_scope" do
+        scoped = Class.new(Phlex::HTML) do
+          include Phlex::Reactive::Streamable
+          include Phlex::Reactive::Component
+
+          def self.name = "ScopedFilterEscape"
+          reactive_scope :form
+        end
+        attrs = scoped.new.send(:reactive_filter, input: "#tags_query")
+        expect(attrs[:data][:reactive_filter_input]).to eq("#tags_query")
+      end
+
+      it "composes with the option/group/empty kwargs" do
+        attrs = instance.send(:reactive_filter, input: "#q", option: ".opt", empty: "#none")
+        expect(attrs[:data][:reactive_filter_option]).to eq(".opt")
+        expect(attrs[:data][:reactive_filter_empty]).to eq("#none")
+      end
+
+      it "raises on a blank selector (a dead binding must fail at render)" do
+        expect { instance.send(:reactive_filter, input: " ") }
+          .to raise_error(ArgumentError, /input:/)
+      end
+
+      it "raises on a boolean selector (the input: cond && \"#sel\" idiom must fail loudly)" do
+        expect { instance.send(:reactive_filter, input: false) }
+          .to raise_error(ArgumentError, /CSS selector/)
+      end
+
+      it "raises when BOTH a field and input: are given (one driving-input form per call)" do
+        expect { instance.send(:reactive_filter, :q, input: "#q") }
+          .to raise_error(ArgumentError, /not both/)
+      end
+
+      it "raises when NEITHER a field nor input: is given" do
+        expect { instance.send(:reactive_filter) }
+          .to raise_error(ArgumentError, /field name|input:/)
+      end
     end
 
     it "raises on a blank option override" do
@@ -2344,6 +2392,60 @@ def self.name = "ClientOnlyTags"
       expect(attrs[:data][:reactive_tags_field]).to eq('[name="tags"]')
     end
 
+    # Issue #224: name: is the ESCAPE HATCH for an instance-dynamic wire name —
+    # a form builder computes "user[tags]" per instance, which the class-level
+    # reactive_scope compile can't express. Verbatim, never re-scoped; the same
+    # fail-at-render posture as the field form (reactive_field's explicit-name
+    # precedent).
+    context "with the name: escape hatch (issue #224)" do
+      it "compiles the verbatim wire name to a [name=…] selector" do
+        attrs = instance.send(:reactive_tags, name: "user[tags]")
+        expect(attrs[:data][:reactive_tags_field]).to eq('[name="user[tags]"]')
+      end
+
+      it "never re-scopes the name under reactive_scope" do
+        scoped = Class.new(Phlex::HTML) do
+          include Phlex::Reactive::Streamable
+          include Phlex::Reactive::Component
+
+          def self.name = "ScopedTagsEscape"
+          reactive_scope :post
+        end
+        attrs = scoped.new.send(:reactive_tags, name: "user[tags]")
+        expect(attrs[:data][:reactive_tags_field]).to eq('[name="user[tags]"]')
+      end
+
+      it "raises on a blank name: (a dead binding must fail at render)" do
+        expect { instance.send(:reactive_tags, name: " ") }
+          .to raise_error(ArgumentError, /name:/)
+      end
+
+      it "raises on a name containing a double quote (would corrupt the compiled selector)" do
+        expect { instance.send(:reactive_tags, name: 'user["tags"]') }
+          .to raise_error(ArgumentError, /double quote/)
+      end
+
+      it "raises on a backslash (CSS-escapes through querySelectorAll — the selector would mismatch)" do
+        expect { instance.send(:reactive_tags, name: "user[tags]\\") }
+          .to raise_error(ArgumentError, /backslash/)
+      end
+
+      it "raises on a control character (querySelectorAll THROWS on a raw newline in a CSS string)" do
+        expect { instance.send(:reactive_tags, name: "user\n[tags]") }
+          .to raise_error(ArgumentError, /control/)
+      end
+
+      it "raises on a boolean name: (the name: cond && \"user[tags]\" idiom must fail loudly)" do
+        expect { instance.send(:reactive_tags, name: false) }
+          .to raise_error(ArgumentError, /name:/)
+      end
+
+      it "raises when BOTH a field and name: are given (one field form per call)" do
+        expect { instance.send(:reactive_tags, :tags, name: "user[tags]") }
+          .to raise_error(ArgumentError, /not both/)
+      end
+    end
+
     describe "#reactive_tags_add (the Enter-to-add trigger)" do
       it "emits ONLY the tagsAdd keyboard action (no dispatch — no POST)" do
         attrs = instance.send(:reactive_tags_add)
@@ -2464,6 +2566,44 @@ def self.name = "ScopedNested"
         expect { instance.send(:nested_field_name, :line_items, :quantity, index: "x[y]") }
           .to raise_error(ArgumentError, /index/)
       end
+
+      # Issue #224: scope: is the per-call ESCAPE HATCH — a form builder's
+      # object name is per-instance ("order", or itself bracketed for a nested
+      # fieldset), which the class-level reactive_scope can't express.
+      # Verbatim; wins over reactive_scope.
+      context "with the scope: escape hatch (issue #224)" do
+        it "wraps the name in the per-call scope verbatim" do
+          expect(instance.send(:nested_field_name, :line_items, :quantity, scope: "order"))
+            .to eq("order[line_items_attributes][NEW_ROW][quantity]")
+        end
+
+        it "wins over the class-level reactive_scope" do
+          scoped = Class.new(Phlex::HTML) do
+            include Phlex::Reactive::Component
+
+            def self.name = "ScopedNestedEscape"
+            reactive_scope :invoice
+          end
+
+          expect(scoped.new.send(:nested_field_name, :line_items, :quantity, index: 3, scope: "order"))
+            .to eq("order[line_items_attributes][3][quantity]")
+        end
+
+        it "accepts a bracketed scope (a nested fieldset's object name)" do
+          expect(instance.send(:nested_field_name, :line_items, :quantity, scope: "user[profile]"))
+            .to eq("user[profile][line_items_attributes][NEW_ROW][quantity]")
+        end
+
+        it "raises on a blank scope: (a dead prefix must fail at render)" do
+          expect { instance.send(:nested_field_name, :line_items, :quantity, scope: " ") }
+            .to raise_error(ArgumentError, /scope:/)
+        end
+
+        it "raises on a non-String/Symbol scope: (scope: cond && \"order\" must fail loudly, never \"false[…]\")" do
+          expect { instance.send(:nested_field_name, :line_items, :quantity, scope: false) }
+            .to raise_error(ArgumentError, /String or Symbol/)
+        end
+      end
     end
 
     it "emits the association-keyed list marker" do
@@ -2507,6 +2647,44 @@ def self.name = "ScopedJsonNested"
         expect { instance.send(:reactive_nested_list, :todos, as: :xml) }
           .to raise_error(ArgumentError, /as:/)
       end
+
+      # Issue #224: name: is the verbatim ESCAPE HATCH for the hidden JSON
+      # sync field — a form builder's wire name ("order[todos]") the
+      # class-level reactive_scope compile can't express. JSON-mode only:
+      # the :attributes mode has no field to name.
+      context "with the name: escape hatch (issue #224)" do
+        it "names the hidden JSON field verbatim" do
+          attrs = instance.send(:reactive_nested_list, :todos, as: :json, name: "order[todos]")
+          expect(attrs[:data][:reactive_nested_json_field]).to eq(%([name="order[todos]"]))
+        end
+
+        it "never re-scopes a verbatim name: under reactive_scope" do
+          scoped = Class.new(Phlex::HTML) do
+            include Phlex::Reactive::Component
+
+            def self.name = "ScopedJsonNestedEscape"
+            reactive_scope :invoice
+          end
+
+          attrs = scoped.new.send(:reactive_nested_list, :todos, as: :json, name: "order[todos]")
+          expect(attrs[:data][:reactive_nested_json_field]).to eq(%([name="order[todos]"]))
+        end
+
+        it "raises on name: without as: :json (there is no field to name in :attributes mode)" do
+          expect { instance.send(:reactive_nested_list, :todos, name: "order[todos]") }
+            .to raise_error(ArgumentError, /as: :json/)
+        end
+
+        it "raises on a blank name:" do
+          expect { instance.send(:reactive_nested_list, :todos, as: :json, name: " ") }
+            .to raise_error(ArgumentError, /name:/)
+        end
+
+        it "raises on a boolean name: (the name: cond && \"…\" idiom must fail loudly)" do
+          expect { instance.send(:reactive_nested_list, :todos, as: :json, name: false) }
+            .to raise_error(ArgumentError, /name:/)
+        end
+      end
     end
 
     it "emits the association-keyed template marker" do
diff --git a/spec/system/tags_field_form_spec.rb b/spec/system/tags_field_form_spec.rb
new file mode 100644
index 0000000..ee53220
--- /dev/null
+++ b/spec/system/tags_field_form_spec.rb
@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+require "system_helper"
+
+# The end-to-end proof of the issue #224 escape hatches, in the exact shape a
+# form-builder gem (phlex-forms' tag_field) renders:
+#
+#   * reactive_tags(name: "user[tags]") — the client resolves the VERBATIM
+#     bracketed wire name to the hidden field (adds/removes maintain it).
+#   * reactive_filter(input: "#user_tags_query") — the client resolves the
+#     query input BY ID, so the input needs NO name … and the real form submit
+#     proves it: user[tags] arrives comma-joined with ZERO stray params.
+#
+# The blessed-form behaviors (spec/system/tags_field_spec.rb) are already
+# covered — this spec exercises the same client paths through the escape-hatch
+# wire only.
+RSpec.describe "Tag-chip input, form-builder shape (issue #224)", type: :system do
+  def install_fetch_spy
+    page.execute_script(<<~JS)
+      window.__actionPosts = 0
+      const orig = window.fetch
+      window.fetch = (url, opts) => {
+        if (String(url).includes("/reactive/actions")) window.__actionPosts++
+        return orig(url, opts)
+      }
+      window.__noReload = "alive"
+    JS
+  end
+
+  def hidden_value
+    find("[data-testid='form-tags-value']", visible: :hidden).value
+  end
+
+  it "filters, adds, and removes entirely client-side through the verbatim wire" do
+    visit "/form_tags_field"
+    expect(page).to have_css("[data-testid='form-tags-query']")
+    install_fetch_spy
+
+    # The filter resolves the id-targeted, NAME-LESS input: typing narrows by
+    # haystack ("db" never appears in the Postgres label).
+    query = find("[data-testid='form-tags-query']")
+    expect(query[:name]).to be_nil.or eq("")
+    query.send_keys("db")
+    expect(page).to have_css("[role=option]", count: 1)
+
+    # Click-to-add writes the bracketed hidden field (the verbatim name: wire).
+    find("[data-testid='form-option-postgres']").click
+    expect(page).to have_css("[data-testid='form-tag-chip']", text: "Postgres")
+    expect(hidden_value).to eq("Postgres")
+
+    # Enter free text appends; remove drops back to one.
+    query.send_keys("Elixir", :enter)
+    expect(page).to have_css("[data-testid='form-tag-chip']", count: 2)
+    expect(hidden_value).to eq("Postgres,Elixir")
+
+    within("[data-reactive-tag='Elixir']") { click_button "×" }
+    expect(page).to have_css("[data-testid='form-tag-chip']", count: 1)
+    expect(hidden_value).to eq("Postgres")
+
+    # All of it client-side: no action POST, no navigation.
+    expect(page.evaluate_script("window.__actionPosts")).to eq(0)
+    expect(page.evaluate_script("window.__noReload")).to eq("alive")
+  end
+
+  it "a real submit carries user[tags] comma-joined and NO stray query param" do
+    visit "/form_tags_field"
+    expect(page).to have_css("[data-testid='form-tags-query']")
+
+    query = find("[data-testid='form-tags-query']")
+    query.send_keys("Ruby", :enter)
+    expect(page).to have_css("[data-testid='form-tag-chip']", text: "Ruby")
+    find("[data-testid='form-option-hotwire']").click
+    expect(page).to have_css("[data-testid='form-tag-chip']", text: "Hotwire")
+
+    find("[data-testid='form-tags-submit']").click
+
+    # The server received user[tags] and re-rendered the chips server-side.
+    expect(page).to have_css("[data-testid='form-tags-submitted']", text: "Saved: Ruby,Hotwire")
+    expect(page).to have_css("[data-testid='form-tag-chip']", count: 2)
+    expect(hidden_value).to eq("Ruby,Hotwire")
+
+    # The name-less query input contributed NOTHING to the submit.
+    expect(find("[data-testid='form-tags-stray']").text).to eq("")
+  end
+end