#Extended features

Forms is a flexible set of building blocks for form functionality. Besides field components and data display, it consists of more complex functionality for surrounding processes such as data flow, validation and building UI.

#Form

Form provides the main forms-helpers including data provider and event handling. This makes it possible to do a combined processing of the data for a form, so you don't have to create individual distribution of data and callbacks to persist changes for each field individually.

Example using the Form.Handler collecting data with onSubmit:

import { Form, Field, Value } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler data={existingData} onSubmit={submitHandler}>
    <Field.Email path="/email" />
    <Value.Date path="/date" />
    <Form.SubmitButton />
  </Form.Handler>,
)

#Schema validation

Forms.Handler supports JSON Schema validation. JSON Schema is a flexible standard that makes it possible to describe the data's structure and validation needs, both for the individual value, and more complex rules across the data set. Descriptions and examples of such validation can be found on a separate page.

#Data context

DataContext builds a surrounding React context that binds an entire source dataset together with the fields placed within. It enables fields and other components to retrieve data from the source data using path parameters that identify where in the source data the target value is located, and the same components will report changes to the data back so the context can update the dataset.

#Steps layout

StepsLayout is a wrapper component for showing forms with a StepIndicator for navigation between several steps. It also includes components for navigating between steps.

Example using the StepsLayout for handling stepped layouts:

import { StepsLayout } from '@dnb/eufemia/extensions/forms'
render(
  <StepsLayout>
    <StepsLayout.Step title="Name">
      <Form.MainHeading>Profile</Form.MainHeading>
    </StepsLayout.Step>
  </StepsLayout>,
)

#Value

Value components are in practice like a field component whose value cannot be changed. They can be displayed with or without a label, and they format the value based on given rules. They can also connect to the surrounding DataContext.

#Iterate

Iterate is components and functionality for traversing values and parts of data sets such as arrays, which contain a varying number of elements where the number of components on the screen depends on how many elements the data consists of.

#Visibility

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