#Form.Outlet

#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

• Form.Handler
• Form.useData
• Form.useSubmit
• Source code
• Docs code

#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.

#Linked data inside Form.Section in outlet

Type in either place to see linked data