#Field

Both the naming and the way the components work are based on being data-driven.

import { Field } from '@dnb/eufemia/extensions/forms'

Table of Contents

• Categorized base components
• All base components
• Feature fields
• More info
  • Standardized properties
  • Controlled & Uncontrolled
  • Creating custom field components

#Categorized base components

The base components exists of several kinds, such as the:

• input category – witch contains of field types that accept and produce values based on input from the user, such as text and numbers.

  #Number

  #String

• selection category – witch contains of field types that allow the user to choose between a fixed set of values (options) represented by different UI components:

  #ArraySelection

  #Option

  #Selection

• toggle category – witch contains of field types that allow the user to toggle between two values, such as true and false:

  #Boolean

  #Toggle

#All base components

#ArraySelection

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

#Boolean

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

#Number

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

#Option

Field.Option is a wrapper component for selecting an option to be used in a dropdown or similar user experiences.

#Selection

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

#String

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

#Toggle

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

#Feature fields

#BankAccountNumber

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

#CountryCode

Field.CountryCode is a wrapper component for the autocomplete component, with options built in for selecting a country code.

#Currency

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

#Date

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

#Email

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

#NationalIdentityNumber

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

#OrganizationNumber

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

#PhoneNumber

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

#PostalCodeAndCity

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

#SelectCountry

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

#More info

#Standardized properties

All input component has a fixed set of props that make it possible to build more complex standardized functionality around them. The most important ones here are value and onChange. Value expects values in the given data type, so for example Field.Number expects a value of the type number, and will give a type error in Typescript if it e.g. receives a number in a string. The callback function submitted to onChange will always receive the value of the corresponding type as the first argument.

It is deliberate that onChange sends out the value from the field, and not the event object that comes from the actual HTML tag into which the user enters data. This is to create a less tight coupling between application code that uses the components, and the internal implementation in the field components. In addition, this makes the surrounding logic simpler by not having to extract, for example, e.target.value everywhere.

The basic components have a number of properties that make it possible to control how they function in the interface, such as multiline on Field.String, which chooses whether to get one line of text (input tag) or several lines (textarea tag) . In addition, they have a number of validation props, such as minLength and required.

#Controlled & Uncontrolled

In React, it's important to be aware of where the states of a given set of data "lives". This can be an entire object that represents an entity the user is going to make changes to (e.g. a user or a bank account), but it also applies to the individual value a form makes changes to. A form field can be controlled or uncontrolled. The components in this package make it possible to work in both ways.

If the functionality is designed so that the state of the data will live outside the form components, you give the components a value and an onChange, and ensure that all changes that are sent out via onChange are fed back via value so that it functions as a controlled component. The internal logic in the components will then ensure that the value is kept the same via the changes it receives from the outside.

If you want the state of the value to live inside the input component, do not send the updated value in via value. The logic will then keep the internal value with the changes continuously, and still send the latest version with all the changes the user has made, even if they are not received continuously via value, as a basic <input> tag in React expects.

#Creating custom field components

The useDataValue hook that is used in all existing field components is exported to make it possible to create custom field components that have the same properties and follow the same flow as the standard components, without the need to recreate all the basic state handling features.