Skip to content
Home

Forms for applications

About
Examples

Table of Contents

Philosophy

Eufemia Forms is:

  • A framework for building form features
  • Designed for flexibility
  • Data-driven API
  • Standardized data handling
  • Loosely coupled components and building blocks
  • Focused on superior user experience, accessibility, and usability

Eufemia Forms provides building blocks for form functionality. Components are built on an API with standardized properties that make it easier to integrate with surrounding data flow and to create custom components that work seamlessly with ready-made Eufemia Forms components.

An important aspect is that the components are data-driven. They're built on the premise of source data rather than being tightly coupled to HTML elements used in their internal implementation.

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, simplifying user interface creation in React. All components are built on base Eufemia components.

Key features:

  • Ready-to-use, data-driven form components
  • Tree-shakeable structure — unused code will not be included in the production bundle
  • All functionality in components can be controlled and overridden via properties
  • Data management using the declarative JSON Pointer directive (e.g., path="/firstName")
  • State can be handled outside 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 Form.Section to quickly create reusable and flexible sections and blocks
  • Parts of your form can be isolated using Form.Isolation
  • Building blocks for creating 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 provides helper components and tools to declaratively create interactive form components that integrate seamlessly with existing data and custom form components. This ensures a consistent look and feel, even when combining ready-made components with custom local components.

Read more about creating your own component.

Requirements

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