Field.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 are placed after the fields in the DOM, matching the default visual order. Messages given to nested fields are included in the server-rendered HTML.

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
    label="Number label"
    labelSrOnly
    width="small"
    placeholder="0000"
  />
</Field.Composition>

Composition of multiple statuses#

<Field.Composition label="Label text" info="FieldBlock info">
  <Field.String
    label="Text label"
    labelSrOnly
    width="small"
    minLength={3}
    warning="Warning message"
  />
  <Field.Number
    label="Number label"
    labelSrOnly
    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
    label="Number label"
    labelSrOnly
    width="small"
    defaultValue={0}
    showStepControls
  />
  <Field.Boolean />
</Field.Composition>