feat(conform-react): add FormBoundary by edmundhung · Pull Request #1302 · edmundhung/conform

edmundhung · 2026-08-13T23:03:04Z

Summary

add a future FormBoundary component for delegated input and blur handling
let form-associated controls outside the form element participate in validation
omit duplicate form-level input and blur handlers while a boundary is active
keep form lookup and DOM-root behavior outside the boundary contract

Generated Summary

Adds the experimental FormBoundary API. It delegates input and blur events for form-associated controls rendered outside the form, while preventing duplicate form-level handlers. Documentation, exports, tests, and a changeset are included.

changeset-bot · 2026-08-13T23:03:08Z

🦋 Changeset detected

Latest commit: 21ef17a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@conform-to/react	Minor
@conform-to/dom	Minor
@conform-to/valibot	Minor
@conform-to/yup	Minor
@conform-to/zod	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

cloudflare-workers-and-pages · 2026-08-13T23:03:53Z

Deploying conform with Cloudflare Pages

Latest commit:	`21ef17a`
Status:	✅ Deploy successful!
Preview URL:	https://4f43bc06.conform.pages.dev
Branch Preview URL:	https://edmundhung-form-boundary.conform.pages.dev

View logs

coderabbitai · 2026-08-13T23:04:08Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8852635f-3bf2-4437-9452-55f506b519c7

📥 Commits

Reviewing files that changed from the base of the PR and between 193e0f4 and 21ef17a.

📒 Files selected for processing (10)

.changeset/tidy-forms-cross-roots.md
docs/README.md
docs/api/react/future/FormBoundary.md
packages/conform-react/future/boundary.ts
packages/conform-react/future/forms.tsx
packages/conform-react/future/index.ts
packages/conform-react/future/state.ts
packages/conform-react/future/types.ts
packages/conform-react/tests/FormBoundary.browser.test.tsx
packages/conform-react/tests/state.test.ts

📜 Recent review details

⏰ Context from checks skipped due to timeout. (7)

GitHub Check: Future API Tests (windows-latest, chromium, 22)
GitHub Check: Future API Tests (ubuntu-latest, webkit, 22)
GitHub Check: E2E Tests (ubuntu-latest, firefox, 22)
GitHub Check: E2E Tests (ubuntu-latest, webkit, 22)
GitHub Check: E2E Tests (windows-latest, chromium, 22)
GitHub Check: E2E Tests (macos-latest, webkit, 22)
GitHub Check: Cloudflare Pages

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2026-04-05T20:22:11.135Z

Learnt from: edmundhung
Repo: edmundhung/conform PR: 1180
File: docs/api/react/future/useControl.md:361-363
Timestamp: 2026-04-05T20:22:11.135Z
Learning: When reviewing usages of `useControl.register` in `packages/conform-react`, consider both supported registration forms valid: (1) passing a single form control element (`HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFieldSetElement`), and (2) passing an iterable collection (`NodeList`/`HTMLCollection`) of checkbox/radio inputs that share the same `name` and compatible `type`. Do not flag the collection-based group registration as an error—both patterns are valid and maintained.

Applied to files:

packages/conform-react/future/state.ts
packages/conform-react/future/boundary.ts
packages/conform-react/tests/state.test.ts
packages/conform-react/tests/FormBoundary.browser.test.tsx
packages/conform-react/future/types.ts
packages/conform-react/future/index.ts
packages/conform-react/future/forms.tsx

📚 Learning: 2026-07-18T14:14:07.849Z

Learnt from: edmundhung
Repo: edmundhung/conform PR: 1244
File: packages/conform-react/future/intent.ts:70-75
Timestamp: 2026-07-18T14:14:07.849Z
Learning: For the React “future” custom-state API, the `customState` handler map must be captured on form mount and remain unchanged when the form is reset. When reviewing changes to the future `useForm`/custom-state implementation, ensure reset logic does not recreate or mutate the captured handler map (the handler map should stay referentially stable per the contract described in `docs/api/react/future/useForm.md`).

Applied to files:

packages/conform-react/future/state.ts
packages/conform-react/future/boundary.ts
packages/conform-react/future/types.ts
packages/conform-react/future/index.ts

🪛 markdownlint-cli2 (0.23.2)

.changeset/tidy-forms-cross-roots.md

[warning] 5-5: First line in a file should be a top-level heading

(MD041, first-line-heading, first-line-h1)

🔇 Additional comments (9)

packages/conform-react/future/boundary.ts (1)

1-13: LGTM!

packages/conform-react/future/types.ts (1)

611-612: LGTM!

Also applies to: 1063-1064

packages/conform-react/future/state.ts (1)

821-826: LGTM!

packages/conform-react/future/index.ts (1)

38-47: LGTM!

packages/conform-react/tests/FormBoundary.browser.test.tsx (1)

1-63: LGTM!

packages/conform-react/tests/state.test.ts (1)

41-41: LGTM!

Also applies to: 1750-1761

docs/README.md (1)

62-62: LGTM!

.changeset/tidy-forms-cross-roots.md (1)

1-5: LGTM!
packages/conform-react/future/forms.tsx (1)
71-104: 🎯 Functional Correctness

No change is needed for independent React roots.

FormBoundary is documented for forms and controls rendered within the boundary. The API does not promise support for controls mounted by a separate createRoot.
			> Likely an incorrect or invalid review comment.

📝 Walkthrough

Walkthrough

Added the experimental React FormBoundary component. It delegates input and blur events to forms and controls rendered outside the form. Updated form metadata, exports, tests, documentation, and the release changeset.

Changes

FormBoundary API

Layer / File(s)	Summary
Boundary context and delegation `packages/conform-react/future/boundary.ts`, `packages/conform-react/future/forms.tsx`	Defines listener types and context registration. `FormBoundary` delegates input and blur events to registered form handlers.
Form integration and metadata `packages/conform-react/future/forms.tsx`, `packages/conform-react/future/types.ts`, `packages/conform-react/future/state.ts`, `packages/conform-react/future/index.ts`	Connects `useForm` to the nearest boundary. Marks delegated contexts and omits direct input and blur handlers. Re-exports `FormBoundary`.
Validation coverage and API documentation `packages/conform-react/tests/FormBoundary.browser.test.tsx`, `packages/conform-react/tests/state.test.ts`, `docs/api/react/future/FormBoundary.md`, `docs/README.md`, `.changeset/tidy-forms-cross-roots.md`	Tests delegated validation and blur behavior. Documents the API and adds the release changeset.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Mergeability Score: ⚪ Minimal · up to 21ef1

The PR adds the future FormBoundary API without any identified concrete correctness or production impact; no actionable merge-blocking risk remains after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant ExternalControl
  participant FormBoundary
  participant useForm
  participant ValidationState
  ExternalControl->>FormBoundary: input or blur event
  FormBoundary->>useForm: delegated form event
  useForm->>ValidationState: update validation or blur state

Suggested reviewers: transparent-citizen

Poem

I’m a rabbit with forms in a row,
Through boundary gates, events now flow.
Input hops, blur follows near,
External controls join the cheer.
Docs and tests spring bright and clear.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely identifies the main change: adding the FormBoundary component to conform-react.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-08-13T23:04:36Z

More templates

@conform-to/dom

npm i https://pkg.pr.new/@conform-to/dom@1302

@conform-to/react

npm i https://pkg.pr.new/@conform-to/react@1302

@conform-to/valibot

npm i https://pkg.pr.new/@conform-to/valibot@1302

@conform-to/validitystate

npm i https://pkg.pr.new/@conform-to/validitystate@1302

@conform-to/yup

npm i https://pkg.pr.new/@conform-to/yup@1302

@conform-to/zod

npm i https://pkg.pr.new/@conform-to/zod@1302

commit: 21ef17a

feat(conform-react): add FormBoundary

21ef17a

edmundhung marked this pull request as draft August 13, 2026 23:03

coderabbitai Bot approved these changes Aug 13, 2026

View reviewed changes

Navigation Menu

feat(conform-react): add FormBoundary - #1302

feat(conform-react): add FormBoundary#1302
edmundhung wants to merge 1 commit into
mainfrom
edmundhung/form-boundary

edmundhung commented Aug 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Aug 13, 2026

Uh oh!

cloudflare-workers-and-pages Bot commented Aug 13, 2026

Uh oh!

coderabbitai Bot commented Aug 13, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

pkg-pr-new Bot commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

edmundhung commented Aug 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

changeset-bot Bot commented Aug 13, 2026

🦋 Changeset detected

Uh oh!

cloudflare-workers-and-pages Bot commented Aug 13, 2026

Deploying conform with Cloudflare Pages

Uh oh!

coderabbitai Bot commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

pkg-pr-new Bot commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

edmundhung commented Aug 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 13, 2026 •

edited

Loading