Form: Support standalone nested forms (opt out of parent attachment)

[NilsEvers]

Description

When a Form component is nested inside another Form, the inner form automatically attaches to the parent and is rendered as a <div> instead of a <form> element.

This causes issues in scenarios where a form element contains a child form — for example, a rich text editor that opens a dialog with its own Form to insert a link or media.

Currently, the form bus is always injected if a parent form exists:

ui/src/runtime/components/Form.vue

Line 77 in 81b46ab

const parentBus = inject(

Which renders the component as a div:

ui/src/runtime/components/Form.vue

Line 288 in 81b46ab

:is="parentBus ? 'div' : 'form'"

There should be a way to opt out of this behavior. For example, a prop like standalone that prevents the form from attaching to a parent form, and ensures it renders as a proper <form> element.

Additional context

No response

[florian2peaches]

This is also a problem for forms inside a Dialog/Portal which is included inside a form, since context is passed through to the portal. There, the form is not even nested, just the context.