#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.

#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>,
)

#Components

#Form

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

#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.

#StepsLayout

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

#Visibility

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