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

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 temporarily saved and loaded when the browser reloads. The data is stored until the session storage is invalidated.

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>

Autocomplete (autofill) user data

Delivery address

Your name

Your address

Address

More information about this form.

Code Editor
<Form.Handler
  onSubmit={(event) => console.log('onSubmit', event)}
  autoComplete
>
  <Form.MainHeading>Delivery address</Form.MainHeading>

  <Card stack>
    <Form.SubHeading>Your name</Form.SubHeading>

    <Field.String label="First name" path="/firstName" required />
    <Field.String label="Last name" path="/lastName" required />
  </Card>

  <Card stack>
    <Form.SubHeading>Your address</Form.SubHeading>

    <FieldBlock label="Address">
      <Flex.Horizontal>
        <Field.String
          label="Street"
          width="medium"
          path="/streetName"
          required
        />
        <Field.Number
          label="Nr."
          width="small"
          path="/streetNr"
          required
        />
      </Flex.Horizontal>
    </FieldBlock>

    <Field.PostalCodeAndCity
      postalCode={{
        required: true,
        path: '/postalCode',
      }}
      city={{
        required: true,
        path: '/city',
      }}
    />
  </Card>

  <Card spacing="medium">
    <P>More information about this form.</P>
    <Form.ButtonRow>
      <Form.SubmitButton />
    </Form.ButtonRow>
  </Card>
</Form.Handler>