#Composition

#Import

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

#Description

Field.Composition is a component for when you create a field block that contains of several existing fields. It uses FieldBlock under the hood.

The composition field serves the purpose of managing layout and status messages, with a strong focus on accessibility. More on that topic down below.

There is a corresponding Value.Composition component that can be used for value components.

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

render(
  <Field.Composition>
    <Field.String label="Field A" />
    <Field.String Label="Field B" />
  </Field.Composition>,
)

When each field inside your composition is horizontally aligned for larger screens, they will wrap to a vertical layout for smaller screens.

If each of the fields have a label, the labels should ideally be top aligned. But when one of the labels contain more text than fits into one line, the fields will be bottom aligned.

In the demo section you find an example on how to handle form states.

#Relevant links

• Source code
• Docs code

#Messages

Messages that appears to be the same, will be grouped together and announced as one message.

You can also show an error, warning or info message at the same time.

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

render(
  <Field.Composition error="Shared error at the bottom">
    <Field.String />
    <Field.String />
  </Field.Composition>,
)

#Accessibility

When using the error, warning or info property, the displayed FormStatus components will be placed in the DOM before the content of the form elements itself.

Furthermore, the status messages are linked to the corresponding form elements using aria-describedby when useFieldProps is used in conjunction.

This will allow screen readers to find and announce the error message properly.

#Demos

#Composition field

You may adjust the widths to your needs.

<Field.Composition info="Info at the bottom" width="large">
  <Field.String label="Field A with a long label" width="medium" />
  <Field.String label="Field B" width="stretch" />
</Field.Composition>

#Composition with a label

<Field.Composition label="A legend for the fieldset" width="large">
  <Field.String label="Field label" width="stretch" />
  <Field.Number width="small" placeholder="0000" />
</Field.Composition>

#Composition of multiple statuses

<Field.Composition label="Label text" info="FieldBlock info">
  <Field.String width="small" minLength={3} warning="Warning message" />
  <Field.Number minimum={10} info="Field info" />
</Field.Composition>

#Composition field with error

<Field.Composition error={new Error('Error at the bottom')} width="large">
  <Field.String label="Field A" width="stretch" />
  <Field.String
    label="Field B with a long label that wraps"
    width="medium"
  />
</Field.Composition>

#Alignment

<Field.Composition label="Label text" align="center">
  <Field.Number width="small" defaultValue={0} showStepControls />
  <Field.Boolean />
</Field.Composition>