#FieldBlock

#Import

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

#Description

FieldBlock is a reusable wrapper for building interactive Field components.

It shows surrounding elements through properties from FieldProps like label and error, and ensure that spacing between different fields work as required when put into surrounding components like Flex.Container or Form.Card.

#Relevant links

• Source code
• Docs code

It can also be used to group multiple inner FieldBlock components, composing status (error) messages together as one component. Check out the Field.Composition docs for that.

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

const YourFieldComponent = () => {
  return (
    <FieldBlock
      forId="unique-id"
      label="A label"
      info="Info at the bottom"
    >
      <Input id="unique-id" />
    </FieldBlock>
  )
}

More information about the usage can be found in the create your own component section.