#Value

#Import

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

#Description

On many screens, data from the dataset is summarized statically, such as on a final review screen where users can confirm their entered data before submitting it to the bank. To streamline the display of such data, Eufemia Forms has Value components. These components operate similarly to field components, meaning they're data-driven, can accept value properties, and can be connected to a surrounding Form.Handler by specifying the relevant value with a path property.

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.String path="/myPath" />)

#Relevant links

• Source code
• Docs code

#Summary and definition lists

When you utilize multiple Value.* components together, consider enclosing them within the SummaryList component. This component offers a standardized approach for presenting labels and values within an accessible definition list structure.

<Value.SummaryList>
  <Value.String label="Foo" value="value" />
  <Value.Number label="Bar" value={123} />
</Value.SummaryList>

#Combine values together

You can also combine Value.* components together by using the value Composition component. And it can still be used within the above mentioned SummaryList component.

<Value.SummaryList>
  <Value.String label="Foo" value="value" />
  <Value.Composition label="Label">
    <Value.String value="value" />
    <Value.Number value={123} />
  </Value.Composition>
</Value.SummaryList>

#Inherit visibility from fields based on path

User-entered data is always stored internally in the data context, even when a Field is temporarily shown or hidden (mounted/unmounted).

By default, Value.* components will render the value regardless of the field's visibility.

To make the visibility of a Value.* component match the field with the same path, use inheritVisibility={true}:

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

const MyForm = () => {
  return (
    <Form.Handler>
      <Form.Visibility pathTrue="/makeVisible">
        <Field.Email path="/myPath" />
      </Form.Visibility>

      <Value.Email path="/myPath" inheritVisibility />
    </Form.Handler>
  )
}

It's recommended to use Form.Visibility because it can animate and describes the UI in a clear, declarative way. However, inheritVisibility will also work with other methods, such as React's useState hook.

You can also propagate the inheritVisibility property down to all nested values with the Value.Provider.

#Inherit labels from fields to values

You can use inheritLabel={true} to inherit the label from the field with the same path.

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

const MyForm = () => {
  return (
    <Form.Handler>
      <Field.String path="/myPath" label="My label" />
      <Value.String path="/myPath" inheritLabel />
    </Form.Handler>
  )
}

#Transform labels

You can use transformLabel to transform the label before it gets displayed.

<Value.String
  label="The label"
  transformLabel={(label) => label.toUpperCase()}
/>

You can combine it with inheritLabel to transform the label from the field with the same path.

And by using the Value.Provider, you can transform the labels of all nested value components.

<Value.Provider transformLabel={(label) => label.replace(/\?$/, '')}>
  <Field.String path="/myPath" label="My label with a question mark?" />
  <Value.String path="/myPath" inheritLabel />
</Value.Provider>

#Components

#Base components

#Composition

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

#String

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

#SummaryList

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

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

#ArraySelection

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

#Provider

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

#SelectCountry

Value.SelectCountry will render the selected country.

#SelectCurrency

Value.SelectCurrency will render the selected currency.

#Selection

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

#Feature components

#Address

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

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

#DateOfBirth

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

#Email

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

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

#NationalIdentityNumber

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

#OrganizationNumber

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

#PhoneNumber

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

#PostalCodeAndCity

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

#Upload

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