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