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

#Autocomplete and autofill

You can set autoComplete on the Form.Handler – each Field.String-field will then get autoComplete="on":

<Form.Handler autoComplete={true}>
  <Field.String path="/firstName" />
  <Field.String path="/lastName" />
</Form.Handler>

The path property will be used to set the name attribute, which lets browser know which autocomplete value should be proposed to the user.

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