Forms for applications

Table of Contents

Examples

Intro

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

The components constitute flexible building blocks that can be used individually, or together for a more practical data flow. They must also be easy to combine with components from other sources and local functionality in the individual application.

The goal of the Forms extension is to make it easy to build forms and other data input features in DNB applications built with React.

Layout

When building your application forms, preferably use the following layout components. They seamlessly places all the fields and components of Eufemia Forms correctly into place.

Flex layout component for easy and consistent application forms.
Card for the default card outline of forms.

Additional features

Feature fields such as Email and PhoneNumber.
Extended features such as the main Form.Handler and StepsLayout for creating stepped forms.

Value components

Beside the interactive Field components, there are also the static Value composition components. Use these to show summaries or read-only parts of your application.

Good to know

All the components in Eufemia Forms are data-driven. This means that they are built on the premises of the source data.

Loosely coupled

A form in a web application usually consists of two "steps". Data in, preferably from a database or a default data set to be distributed in fields on the screen, and data out, where what the user has typed or selected in the components must be collected in a corresponding data set before it is stored or sent to an API.

Getting started

You can simply use e.g. Field.Email without anything more than that:

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

Or save time and code when handling your forms:

import '@dnb/eufemia/extensions/forms/style'
import { Form, Field } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler
    data={existingData}
    onChange={...}
    onSubmit={...}
  >
    <Card spacing="medium">
      <Field.OrganizationNumber
        path="/companyOrganizationNumber"
        required
      />
      <Field.String path="/companyName" label="Bedriftens navn" required />
      <Field.Selection
        variant="radio"
        path="/postalAddressSelect"
        label="Postadresse (ønsket sted for tilsendt post)"
      >
        <Field.Option
          value="companyAddress"
          title="Samme som forretningsadresse"
        />
        <Field.Option value="other" title="Annet" />
      </Field.Selection>
    </Card>
  </Form.Handler>,
)

But the real strong parts about Eufemia Forms is the composability when you create your own components:

import '@dnb/eufemia/extensions/forms/style'
import { Form, Field } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler data={existingData} onSubmit={...}>
    <Card spacing="medium">
      <MyCustomComponent path="/companyName" required />
    </Card>
  </Form.Handler>,
)

Create your own component – APIs

Eufemia Forms consists of helper fields and tools so you can declaratively create interactive form components that flawlessly integrates between existing data and your custom form components.

Read more about on how to create your own component.

Import the styles

You need to import the styles once:

import '@dnb/eufemia/extensions/forms/style'

Requirements

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

#Forms for applications

#Examples

#Intro

#Layout

#Additional features

#Value components

#Good to know

#Getting started

#Create your own component – APIs

#Import the styles

#Requirements