#Composition

#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

• Source code
• Docs code

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