@dnb/eufemia/docs/uilib/extensions/forms/Form.md

DNB Eufemia Design System UI Library

---
title: 'Form'
description: '`Form` provides the main forms-helpers including data provider and event handling.'
version: 11.3.0
generatedAt: 2026-05-19T08:46:52.593Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Form

## Import

```tsx
import { Form } from '@dnb/eufemia/extensions/forms'
```

## Description

`Form` provides the main forms-helpers including data provider and event handling.

```tsx
import { Form, Field } from '@dnb/eufemia/extensions/forms'

const existingData = {
  email: 'name@email.no',
}

function MyForm() {
  return (
    <Form.Handler
      defaultData={existingData}
      onSubmit={async (data) => {
        await makeRequest(data)
      }}
    >
      <Form.MainHeading>Heading</Form.MainHeading>
      <Form.Card>
        <Field.Email path="/email" />
      </Form.Card>

      <Form.ButtonRow>
        <Form.SubmitButton />
      </Form.ButtonRow>
    </Form.Handler>
  )
}
```

`defaultData` is only used if no other data source is provided and will not update internal data if it changes after mount. Initializing fields with an empty value is optional; if you do, prefer the field's `emptyValue` (often `undefined`).

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Form)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form)

## Demos

### With a help button

```tsx
render(
  <Form.Handler
    defaultData={{
      myField: 12345,
    }}
  >
    <Form.Card>
      <Field.Number
        path="/myField"
        label="Label text"
        help={{
          title: 'Help title',
          content: 'Help content.',
        }}
      />
      <Value.Number
        path="/myField"
        inheritLabel
        help={{
          title: 'Help title',
          content: 'Help content.',
        }}
      />
    </Form.Card>
  </Form.Handler>
)
```

### In combination with a SubmitButton

```tsx
render(
  <Form.Handler onSubmit={async (data) => console.log('onSubmit', data)}>
    <Form.Card>
      <Field.Email path="/email" />
      <Form.ButtonRow>
        <Form.SubmitButton />
      </Form.ButtonRow>
    </Form.Card>
  </Form.Handler>
)
```

### New location after async submit

```tsx
render(
  <Form.Handler
    data={{
      myField: 'Some value',
    }}
    onSubmit={async (data) => {
      console.log('onSubmit', data)

      // Wait for 2 seconds
      await new Promise((resolve) => setTimeout(resolve, 2000))

      // e.g. go to new location

      // Optionally, you can return e.g. the "pending" status with an additional info
      return {
        info: 'Redirecting to a new location',
        // Force the form to stay in pending state
        status: 'pending',
      }
    }}
    asyncSubmitTimeout={10000}
  >
    <Flex.Stack>
      <Form.MainHeading>Heading</Form.MainHeading>
      <Form.Card>
        <Value.String label="Summary" path="/myField" />
      </Form.Card>
      <Form.ButtonRow>
        <Form.SubmitButton />
      </Form.ButtonRow>
    </Flex.Stack>
  </Form.Handler>
)
```

### Filter your data

```tsx
const id = 'my-form'
const filterDataHandler = ({ props }) => !props.disabled
const MyForm = () => {
  const { data } = Form.useData(id, {
    disabled: false,
    myField: 'Value',
  })
  return (
    <Form.Handler
      id={id}
      onSubmit={(data, { filterData }) => {
        console.log('onSubmit', filterData(filterDataHandler))
      }}
    >
      <Flex.Stack>
        <Field.Boolean label="Disabled" path="/disabled" />
        <Field.String
          label="My Field"
          path="/myField"
          disabled={data.disabled}
        />
        <Form.ButtonRow>
          <Form.SubmitButton />
        </Form.ButtonRow>
      </Flex.Stack>
    </Form.Handler>
  )
}
const Output = () => {
  const { filterData } = Form.useData(id)
  const { hasErrors } = Form.useValidation(id)
  return (
    <>
      <Tools.Log top data={hasErrors()} label="hasErrors:" />
      <Tools.Log top data={filterData(filterDataHandler)} />
    </>
  )
}
render(
  <>
    <MyForm />
    <Output />
  </>
)
```

## Components

## [Form.Card](/uilib/extensions/forms/Form/Card/)

`Form.Card` is a wrapper for the Card component to make it easier to use inside a form.

## [Form.Section](/uilib/extensions/forms/Form/Section/)

`Form.Section` lets you compose blocks of fields and values to be reused in different contexts.

## [Form.Section.ViewContainer](/uilib/extensions/forms/Form/Section/ViewContainer/)

`Form.Section.ViewContainer` enables users to toggle (with animation) the content of each item between the view and edit container.

## [Form.Section.EditContainer](/uilib/extensions/forms/Form/Section/EditContainer/)

`Form.Section.EditContainer` enables users to toggle (with animation) the content of each item between the view and edit container.

## [Form.Appearance](/uilib/extensions/forms/Form/Appearance/)

`Form.Appearance` is a provider for theming form fields.

## [Form.ButtonRow](/uilib/extensions/forms/Form/ButtonRow/)

`Form.ButtonRow` is a wrapper for horizontally separated buttons.

## [Form.clearData](/uilib/extensions/forms/Form/clearData/)

`Form.clearData` lets you clear the data of a form.

## [Form.getData](/uilib/extensions/forms/Form/getData/)

`Form.getData` lets you access your form data outside of the form context.

## [Form.Handler](/uilib/extensions/forms/Form/Handler/)

The `Form.Handler` is the root component of your form. It provides an HTML form element and handles the form data.

## [Form.InfoOverlay](/uilib/extensions/forms/Form/InfoOverlay/)

`Form.InfoOverlay` is used to display an informational message that fully covers the available space.

## [Form.Isolation](/uilib/extensions/forms/Form/Isolation/)

`Form.Isolation` lets you isolate parts of your form so data and validations are not shared between the `Form.Handler` until you want to.

## [Form.MainHeading](/uilib/extensions/forms/Form/MainHeading/)

`Form.MainHeading` is a standardized main heading for sections, ensuring default layout, spacing etc.

## [Form.Section.Toolbar](/uilib/extensions/forms/Form/Section/Toolbar/)

`Form.Section.Toolbar` is a helper component to be used within an `Form.Section.ViewContainer` and `Form.Section.EditContainer`.

## [Form.setData](/uilib/extensions/forms/Form/setData/)

`Form.setData` lets you set or modify your form data outside of the form context.

## [Form.SubHeading](/uilib/extensions/forms/Form/SubHeading/)

`Form.SubHeading` is a standardized sub heading for sections, ensuring default layout, spacing etc.

## [Form.SubmitButton](/uilib/extensions/forms/Form/SubmitButton/)

`Form.SubmitButton` connects to the `Form.Handler` to submit the active state of the internal DataContext, triggering `onSubmit`.

## [Form.SubmitConfirmation](/uilib/extensions/forms/Form/SubmitConfirmation/)

`Form.SubmitConfirmation` can be used to prevent the `Form.Handler` from submitting, and makes it possible to show a confirmation dialog in different scenarios.

## [Form.SubmitIndicator](/uilib/extensions/forms/Form/SubmitIndicator/)

`Form.SubmitIndicator` lets you show an indicator while async form operations are performed.

## [Form.useData](/uilib/extensions/forms/Form/useData/)

`Form.useData` lets you access or modify your form data outside of the form context within your application.

## [Form.useSnapshot](/uilib/extensions/forms/Form/useSnapshot/)

`Form.useSnapshot` lets you store data snapshots of your form data, either inside or outside of the form context.

## [Form.useSubmit](/uilib/extensions/forms/Form/useSubmit/)

`Form.useSubmit` lets you trigger form submit from outside the form element, e.g. when the submit button is in a modal footer or toolbar.

## [Form.useTranslation](/uilib/extensions/forms/Form/useTranslation/)

`Form.useTranslation` is a hook that returns the translations for the current locale.

## [Form.useValidation](/uilib/extensions/forms/Form/useValidation/)

`Form.useValidation` lets you monitor and modify field status or your form errors outside of the context.

## [Form.Visibility](/uilib/extensions/forms/Form/Visibility/)

`Form.Visibility` makes it possible to hide components and elements on the screen based on the dynamic state of data.