Skip to content
Home

Composition

Info
Demos
Properties

Import

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Composition />)

Description

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

By default, they will be placed in a horizontal layout. When rendered on a small screen, and the Composition contains Values with label they will be placed in a vertical layout.

There is a corresponding Field.Composition component that can be used for field components.

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


render(
  <Value.Composition label="Label">
    <Value.String label="First" path="/first" />
    <Value.String label="Second" path="/second" />
  </Value.Composition>,
)

Relevant links

Accessibility

When you combine 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.

Demos

Basic usage

Label AvalueLabel B
Code Editor
<Value.Composition>
  <Value.String label="Label A" value="value" />
  <Value.Number label="Label B" value={123} />
</Value.Composition>

In SummaryList

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

Inside a plain SummaryList

Subheading

Name
JohnDoe
Street
ØvraørnefjeddstakkslåttåveienH0301
City
9713Russenes
Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Doe',
    streetName: 'Øvraørnefjeddstakkslåttåveien',
    streetNr: 9998,
    streetId: 'H0301',
    postalCode: '9713',
    city: 'Russenes',
  }}
>
  <Form.Card>
    <Form.SubHeading>Subheading</Form.SubHeading>

    <Value.SummaryList>
      <Value.Composition label="Name">
        <Value.String path="/firstName" />
        <Value.String path="/lastName" />
      </Value.Composition>

      <Value.Composition label="Street">
        <Value.String path="/streetName" />
        <Value.Number path="/streetNr" />
        <Value.String path="/streetId" />
      </Value.Composition>

      <Value.Composition label="City">
        <Value.String path="/postalCode" />
        <Value.String path="/city" />
      </Value.Composition>
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

Inside a SummaryList with grid layout

Subheading

Name
Fornavn
John
Etternavn
Doe
Street
ØvraørnefjeddstakkslåttåveienH0301
Postnummer og sted
9713 Russenes
Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Doe',
    streetName: 'Øvraørnefjeddstakkslåttåveien',
    streetNr: 9998,
    streetId: 'H0301',
    postalCode: '9713',
    city: 'Russenes',
  }}
>
  <Form.Card>
    <Form.SubHeading>Subheading</Form.SubHeading>

    <Value.SummaryList layout="grid">
      <Value.Composition label="Name">
        <Value.Name.First path="/firstName" />
        <Value.Name.Last path="/lastName" />
      </Value.Composition>

      <Value.Composition label="Street">
        <Value.String path="/streetName" />
        <Value.Number path="/streetNr" />
        <Value.String path="/streetId" />
      </Value.Composition>

      <Value.PostalCodeAndCity
        postalCode={{
          path: '/postalCode',
        }}
        city={{
          path: '/city',
        }}
      />
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

Width comparison

Medium maxWidthNam sed aliquet nunc. Pellentesque condimentum enim arcu.Without a widthNam sed aliquet nunc. Pellentesque condimentum enim arcu.
Code Editor
<Value.Composition gap="large">
  <Value.String
    maxWidth="medium"
    label="Medium maxWidth"
    value="Nam sed aliquet nunc. Pellentesque condimentum enim arcu."
  />
  <Value.String
    label="Without a width"
    value="Nam sed aliquet nunc. Pellentesque condimentum enim arcu."
  />
</Value.Composition>

With help

Label with helpvalue
Label with help inside SummaryList
value
Another value
Code Editor
<Flex.Stack>
  <Value.Composition
    label="Label with help"
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  >
    <Value.String value="value" />
    <Value.Number value={123} />
  </Value.Composition>

  <Form.Card>
    <Value.SummaryList>
      <Value.Composition
        label="Label with help inside SummaryList"
        help={{
          title: 'Hva betyr lånebeløp?',
          content: 'Dette er hvor mye du har tenkt å låne totalt.',
        }}
      >
        <Value.String value="value" />
        <Value.Number value={123} />
      </Value.Composition>
      <Value.String value="Another value" />
    </Value.SummaryList>
  </Form.Card>
</Flex.Stack>