Skip to content
Home

Handler

Info
Demos
Properties
Events

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.Hander – each Field.String-field will then get autoComplete="on":

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

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

Demos

In combination with a SubmitButton

Code Editor
<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

Changes you make to the fields are saved to session storage and loaded when the browser reload (as long as it is the same session)
Code Editor
<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>