Import#
import { Form } from '@dnb/eufemia/extensions/forms'render(<Form.Outlet formHandlerId="my-form-id">...</Form.Outlet>)
Description#
Form.Outlet links its children to an existing Form.Handler context by formHandlerId.
This is useful when you need to render parts of a form outside the handler subtree, such as in a side panel, modal footer, or another layout region.
The formHandlerId is required. The matching Form.Handler can be rendered before or after the outlet. The outlet stays empty until the handler context is available and then connects automatically.
When Form.Outlet is placed outside a Form.Handler subtree it automatically wraps its children in a <form> element, so submit buttons work correctly. When placed inside an existing Form.Handler, no extra <form> element is added.
Relevant links#
Demos#
Link data between handler and outlet#
Render outlet before handler#
Form.Outlet can be rendered before its linked Form.Handler. It stays empty until the handler context is available and then connects automatically.