Value
Many screens summarize values from the data set statically, such as a final screen where the user can review the data they have entered before submitting it to the bank. To make displaying such data easier, a number of Value components have been created. These function similarly as field components. That is, they are data-driven, can be given value-props, or connected to a surrounding Form.Handler by pointing to the relevant value they are to display with a path-prop. They are also available with more functional variants for given types of data.
import { Value } from '@dnb/eufemia/extensions/forms'
Creating custom value components
The useValue hook that is used in all existing value components is exported to make it possible to create custom value 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.
Base components
String
Value.String is a base component for displaying values of the type string.
Number
Value.Number is a base component for displaying values of the type number.
Boolean
Value.Boolean is a base component for displaying values of the type boolean.
Feature components
BankAccountNumber
Value.BankAccountNumber is a wrapper component for displaying string values, with user experience tailored for bank account number values.
Currency
Value.Currency is a wrapper component for displaying number values, with user experience tailored for currency values.
Date
Value.Date is a wrapper component for displaying string values, with user experience tailored for date values.
Value.Email is a wrapper component for displaying string values, with user experience tailored for email values.
NationalIdentityNumber
Value.NationalIdentityNumber is a wrapper component for displaying string values, with user experience tailored for national identity number values.
PhoneNumber
Value.PhoneNumber is a wrapper component for displaying string values, with user experience tailored for phone number values.