Skip to content

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 and must reference a mounted Form.Handler.

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

Form.Handler

NameNoraMork

Linked editor (Form.Outlet)

Linked data inside Form.Section in outlet

Form.Handler

Linked editor in Form.Section (Form.Outlet)

Linked data
Type in either place to see linked data