#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>,
)

#Temporary storage

The sessionStorageId feature uses the browsers session-storage (temporary storage mechanism) to store data entered by the user.

This lets the user navigate away and come back to the form, without loosing already entered data.

Ensure you only use this feature for non-sensitive data.

It will flush the storage once the form gets submitted.

#Demos

#In combination with a SubmitButton

<Form.Handler
  defaultData={{
    email: null,
  }}
  onSubmit={(event) => console.log('onSubmit', event)}
>
  <Card spacing="medium">
    <Field.Email path="/email" />
    <Form.ButtonRow>
      <Form.SubmitButton />
    </Form.ButtonRow>
  </Card>
</Form.Handler>

#With session storage

<Form.Handler
  onSubmit={(event) => console.log('onSubmit', event)}
  sessionStorageId="session-key"
>
  <Card spacing="medium">
    <Field.String label="Name" path="/name" />
    <Field.Email path="/email" />
    <Form.ButtonRow>
      <Form.SubmitButton />
    </Form.ButtonRow>
  </Card>
</Form.Handler>