#Extensions

#Description

Eufemia extensions are reusable parts that do not fit naturally into a component or element but rather have the nature of being an extended solution of Eufemia. There are several great reasons behind opting for having extensions separated:

1. Modularity and Reusability: Separating extensions promotes a modular design and minimizes code duplication. It enables the creation of subsystems that are tightly integrated with their respective domains, such as a Forms extension that seamlessly connects to its associated data and functionality.
2. Decoupled Complexity: Extensions often add specific or advanced functionality that may not be relevant for all use cases. Keeping them separate prevents the core components or elements from becoming overly complex.
3. Customizability: Extensions allow for easier customization and flexibility. Developers can pick and choose only the extensions they need, tailoring the solution to their specific requirements.
4. Improved Maintainability: Isolating extensions simplifies maintenance and updates. Changes to an extension do not risk introducing bugs in the core components, making the ecosystem more stable.
5. Clear Separation of Concerns: By defining extensions as independent solutions, it’s easier to distinguish between core functionality and optional features (handled by extensions).

#Import extensions

import { ... } from '@dnb/eufemia/extensions'

#Import extensions styles

The styles for extensions are not a part of the default styles, so you have to import them explicitly.

import '@dnb/eufemia/style/themes/ui/extensions'

#Available Extensions

#Connectors

Connectors are an opt-in way to extend the functionality of a form. They can be used to add features like API calls for autofill, validation, and more.

#Form.Appearance

Form.Appearance is a provider for theming form fields.

#Form.ButtonRow

Form.ButtonRow is a wrapper for horizontally separated buttons.

#Form.Card

Form.Card is a wrapper for the Card component to make it easier to use inside a form.

#Form.Handler

The Form.Handler is the root component of your form. It provides an HTML form element and handles the form data.

#Form.InfoOverlay

Form.InfoOverlay is used to display an informational message that fully covers the available space.

#Form.Isolation

Form.Isolation lets you isolate parts of your form so data and validations are not shared between the Form.Handler until you want to.

#Form.MainHeading

Form.MainHeading is a standardized main heading for sections, ensuring default layout, spacing etc.

#Form.Section.EditContainer

Form.Section.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#Form.Section.Toolbar

Form.Section.Toolbar is a helper component to be used within an Form.Section.ViewContainer and Form.Section.EditContainer.

#Form.Section.ViewContainer

Form.Section.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#Form.Section

Form.Section lets you compose blocks of fields and values to be reused in different contexts.

#Form.SubHeading

Form.SubHeading is a standardized sub heading for sections, ensuring default layout, spacing etc.

#Form.SubmitButton

Form.SubmitButton connects to the Form.Handler to submit the active state of the internal DataContext, triggering onSubmit.

#Form.SubmitConfirmation

Form.SubmitConfirmation can be used to prevent the Form.Handler from submitting, and makes it possible to show a confirmation dialog in different scenarios.

#Form.SubmitIndicator

Form.SubmitIndicator lets you show an indicator while async form operations are performed.

#Form.Visibility

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

#Form.clearData

Form.clearData lets you clear the data of a form.

#Form.getData

Form.getData lets you access your form data outside of the form context.

#Form.setData

Form.setData lets you set or modify your form data outside of the form context.

#Form.useData

Form.useData lets you access or modify your form data outside of the form context within your application.

#Form.useSnapshot

Form.useSnapshot lets you store data snapshots of your form data, either inside or outside of the form context.

#Form.useSubmit

Form.useSubmit lets you trigger form submit from outside the form element, e.g. when the submit button is in a modal footer or toolbar.

#Form.useTranslation

Form.useTranslation is a hook that returns the translations for the current locale.

#Form.useValidation

Form.useValidation lets you monitor and modify field status or your form errors outside of the context.

#Form

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

#Iterate.AnimatedContainer

Iterate.AnimatedContainer can be used to animate items when they are added or removed.

#Iterate.Array

Iterate.Array works in many ways similar to field-components. It has a value-property that can receive an array or you can give it a path if you want it to retrieve an array from a surrounding DataContext. All children components of Iterate.Array are rendered once per item the array-value consists of.

#Iterate.Count

Iterate.Count is a helper component / function that returns the count of a data array or object.

#Iterate.EditContainer

Iterate.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#Iterate.ItemNo

Iterate.ItemNo is a helper component that can be used to render the current item number (index) in a given string.

#Iterate.PushButton

Iterate.PushButton builds on top of the same data flow logic as field components, but the only thing it changes in the value it receives or retrieves from source data is adding a new item to the array.

#Iterate.PushContainer

Iterate.PushContainer enables users to create a new item in the array.

#Iterate.RemoveButton

Iterate.RemoveButton connects to the array of a surrounding Iterate.Array and removes the item when clicked.

#Iterate.Toolbar

Iterate.Toolbar is a helper component to be used within an Iterate.AnimatedContainer to add a toolbar to each item in the array.

#Iterate.ViewContainer

Iterate.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

#Iterate.Visibility

The Iterate.Visibility component allows you to conditionally display content based on relative paths (itemPath) within an Iterate.Array component.

#Iterate

Iterate contains 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.

#Value.Address

Value.Address is a wrapper component for displaying string values, with user experience tailored for postal and street addresses.

#Value.ArraySelection

Value.ArraySelection is a wrapper component for displaying string values, with user experience tailored for an array of selected values.

#Value.BankAccountNumber

Value.BankAccountNumber is a wrapper component for displaying string values, with user experience tailored for bank account number values.

#Value.Boolean

Value.Boolean is a base component for displaying values of the type boolean.

#Value.Composition

Value.Composition combines two or more Value.* components into one.

#Value.Currency

Value.Currency is a wrapper component for displaying number values, with user experience tailored for currency values.

#Value.Date

Value.Date is a wrapper component for displaying string values, with user experience tailored for date values.

#Value.DateOfBirth

Value.DateOfBirth is a wrapper component for displaying string values, with user experience tailored for date of birth values.

#Value.Email

Value.Email is a wrapper component for displaying string values, with user experience tailored for email values.

#Value.Name

Value.Name is a wrapper component for displaying string values, with user experience tailored for personal, like first and last name and company names.

#Value.NationalIdentityNumber

Value.NationalIdentityNumber is a wrapper component for displaying string values, with user experience tailored for national identity number values.

#Value.Number

Value.Number is a base component for displaying values of the type number.

#Value.OrganizationNumber

Value.OrganizationNumber is a wrapper component for displaying string values, with user experience tailored for organization number values.

#Value.PhoneNumber

Value.PhoneNumber is a wrapper component for displaying string values, with user experience tailored for phone number values.

#Value.PostalCodeAndCity

Value.PostalCodeAndCity is a wrapper component for displaying string values, with user experience tailored for Norwegian postal code and city values.

#Value.Provider

The Value.Provider lets you pass generic properties to all nested Value.* components.

#Value.SelectCountry

Value.SelectCountry will render the selected country.

#Value.SelectCurrency

Value.SelectCurrency will render the selected currency.

#Value.Selection

Value.Selection is a component for displaying a string value based on a user selection.

#Value.String

Value.String is a base component for displaying values of the type string.

#Value.SummaryList

Value.SummaryList uses definition lists to semantically make content consumable for screen readers.

#Value.Upload

Value.Upload is a value component for displaying a list of files.

#Value

Value components can be used to summarize any kind of data.

#Wizard.Buttons

Wizard.Buttons is a combination of PreviousButton and NextButton for navigating between steps/pages.

#Wizard.Container

The Wizard.Container is a container component for multi-page forms including a step indicator.

#Wizard.EditButton

Wizard.EditButton is a button to be placed in a summary step.

#Wizard.NextButton

Wizard.NextButton connects to the Wizard.Context to move the user to the next step when clicked.

#Wizard.PreviousButton

Wizard.PreviousButton connects to the Wizard.Context to move the user to the previous step when clicked.

#Wizard.Step

Each step should be wrapped with a Wizard.Step component directly inside Wizard.Container.

#Wizard.LocationHooks

Is a set of React Hooks that lets you easily hook up your existing router in order to store the current step in the URL query string.

#Wizard.useStep

Wizard.useStep returns Wizard.Context parameters such as totalSteps, activeIndex or a setActiveIndex handler.

#Wizard

Wizard is a set of components for showing forms with a StepIndicator for navigation between several wizard. It also includes components for navigating between wizard.

#What are fields?

#All features and APIs

#Field.ArraySelection

Field.ArraySelection is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.

#Field.Boolean

Field.Boolean is the base component for receiving user input where the target data is of type boolean.

#Field.Composition

Field.Composition is a component for when you create a field block that contains of several existing fields.

#Field.MultiSelection

Field.MultiSelection is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options. This field accepts structured data with objects containing value and title properties.

#Field.Number

Field.Number is the base component for receiving user input where the target data is of type number.

#Field.Selection

Field.Selection is a wrapper component for selecting between options using a dropdown or similar user experiences.

#Field.Slider

Field.Slider is a wrapper component for the Slider to make it easier to use inside a form.

#Field.String

Field.String is the base component for receiving user input where the target data is of type string.

#Field.Toggle

Field.Toggle is a base component for allowing the user to toggle between two different values in the target data point.

#Field.Upload

Field.Upload is a wrapper for the Upload component to make it easier to use inside a form.

#Base fields

#Blocks

#Change log

Change log for the Eufemia Forms extension

#FieldBlock

FieldBlock is a reusable wrapper for building Field-components. It shows surrounding elements through properties from FieldProps like label and error.

#ValueBlock

ValueBlock is a reusable wrapper component that can be used to easily create custom Value-components that will display in the same way as other Value-components.

#useFieldProps

The useFieldProps hook standardize handling of the value flow for a single consumer component representing one data point.

#useValueProps

The useValueProps hook standardize handling of the value flow for a single consumer component representing one data point.

#Create your own component

#Field.Address

Field.Address is a wrapper component for the input of strings, with user experience tailored for postal and street addresses.

#Field.BankAccountNumber

Field.BankAccountNumber is a wrapper component for the input of strings, with user experience tailored for bank account number values.

#Field.Currency

Field.Currency is a wrapper component for the input of numbers, with user experience tailored for currency values.

#Field.Date

Field.Date is a wrapper component for the input of strings, with user experience tailored for date values.

#Field.DateOfBirth

Field.DateOfBirth is a wrapper component for the input of strings, with user experience tailored for date of birth values.

#Field.Email

Field.Email is a wrapper component for the input of strings, with user experience tailored for email values.

#Field.Expiry

Field.Expiry is a wrapper component for the input of strings, with user experience tailored for expiry dates for payment cards.

#Field.Name

Field.Name is a wrapper component for the input of strings, with user experience tailored for first name, last name and company names.

#Field.NationalIdentityNumber

Field.NationalIdentityNumber is a wrapper component for the input of strings, with user experience tailored for national identity number values.

#Field.OrganizationNumber

Field.OrganizationNumber is a wrapper component for the input of strings, with user experience tailored for organization number values.

#Field.Password

Field.Password is a wrapper component for the input of strings, with user experience tailored for passwords.

#Field.PhoneNumber

Field.PhoneNumber is a wrapper component for the input of strings, with user experience tailored for phone number values.

#Field.PostalCodeAndCity

Field.PostalCodeAndCity is a wrapper component for input of two separate values with user experience tailored for postal code and city values.

#Field.SelectCountry

Field.SelectCountry is a wrapper component for the selection component, with options built in for selecting a country.

#Field.SelectCurrency

Field.SelectCurrency is a wrapper component for the selection component, with options built in for selecting a currency.

#Feature fields

#Getting started

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.

#Forms for applications

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.

#PaymentCard

The Payment Card component is used to display payment card information in a standardized format.

#VippsWalletButton

A branded Vipps wallet call-to-action button extension.