Skip to content
Home

Forms for applications

About
Examples

Table of Contents

Philosophy

Eufemia Forms is:

  • A framework for building form features
  • Flexibility by design
  • Data-driven API
  • Standardized data handling
  • Loosely coupled components and building blocks
  • Focus on superior user experience, accessibility, and usability

Eufemia Forms is a set of building blocks for form functionality. Components are built on an API with standardized sets of properties that make it easier to combine with surrounding data flow, and not least to create your own components that work well together with the ready-made components in Eufemia Forms.

An important point is that the components are data-driven. They are built on the premise of the source data, rather than being closely coupled to HTML elements that the internal implementation uses.

The primary objective of Eufemia Forms is to simplify the process of building forms by leveraging a declarative API. This approach not only saves time but also reduces code and complexity.

Features

Eufemia Forms consists of reusable components for data input, data display and surrounding layout for simplified user interface creation in React, built on top of base Eufemia components.

In summary:

  • Ready to use data driven form components.
  • Three shakeable structure. Unused code will not be included in the production bundle.
  • All functionality in all components can be controlled and overridden via properties.
  • Data management using the declarative JSON Pointer directive (i.e path="/firstName").
  • State can be handled outside of the Form.Handler (Provider Context) with the useData hook.
  • Support for both Zod and AJV JSON Schema.
  • Async form submission and validation support.
  • Theming of field sizes with Form.Appearance.
  • Easy to integrate browser location support.
  • Static value components for displaying data with proper formatting.
  • Use the Form.Section component to quickly create reusable and flexible sections and blocks for your form.
  • Parts of your form can be isolated from the rest of the form using the Form.Isolation component.
  • Building blocks for creating your custom field components.

Quick start

Here's how you import the components from within scopes, such as Form and Field:

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

Field components can be used directly as they are, for example Field.Email:

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Email />)

NB: In the above example, only the email field will be a part of your application bundle. Unused code will be tree-shaken away.

And here is how you can use the Form component:

Quick start

Ønsket sted for tilsendt post (valgfritt)

More details in the getting started section.

Best practices

Read more about best practices on forms.

Create your own component

Eufemia Forms consists of helper components and tools so you can declaratively create interactive form components that flawlessly integrates between existing data and your custom form components. This ensures a common look and feel, even when ready-made components are combined with your local custom components.

Read more about creating your own component.

Requirements

Some of the internal logic requires support for importing JSON files. Meta frameworks do often support this by default.