Handler

Description

The Form.Handler component provides both the Form.Element and a HTML form element.

It ensures, users can press enter key while focusing on an input field.
It calls preventDefault by default.

import '@dnb/eufemia/extensions/forms/style'
import { Form } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler
    data={existingData}
    onChange={...}
    onSubmit={...}
  >
    Your Form
  </Form.Handler>,
)

Demos

In combination with a SubmitButton

E-post
Code Editor<Form.Handler
  data={{
    email: null,
  }}
  onSubmit={(event) => console.log('onSubmit', event)}
>
  <Layout.Card spacing="medium">
    <Field.Email path="/email" />
    <Form.ButtonRow>
      <Form.SubmitButton />
    </Form.ButtonRow>
  </Layout.Card>
</Form.Handler>