#Blocks

#Description

Blocks are a collection of reusable fields and values. They can also be 100% customized and nested in each other. This makes it easy to reuse the same blocks in different contexts.

• A single block can be used without any further Eufemia Forms components, just like any other field and value.
• Each block should have integration tests.
• Each block has its own localization and translations.
• When you import a block, only the code and translations used in the block will be included in your production bundle.

#Relevant links

• Source code
• Docs code

Read about how to create a section (block) by using a Form.Section.

#Usage

You import a block like this:

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

#Integration

It is recommended to use blocks within a Wizard and Form.Handler. However, they can also be used independently. In such cases, you can utilize the onChange event to listen for changes in the block.

You can also define a path to the block component. This makes it possible to reuse the same block component in different contexts.

<ChildrenWithAge path="/account/holder/children" />

#Customization

The overwriteProps property lets you overwrite all of the field properties if needed:

<ChildrenWithAge
  overwriteProps={{
    firstName: { label: 'Custom label' },
    lastName: { required: false, minLength: 0 },
  }}
/>

#Localization

You can change the texts and translations used inside of a block via the Form.Handler:

import { Form } from '@dnb/eufemia/src/extensions/forms'
import { ChildrenWithAge } from '@dnb/eufemia/extensions/forms/blocks'

const myTranslations = {
  'nb-NO': { ChildrenWithAge: { hasChildren: { title: 'Egendefinert' } } },
  'en-GB': { ChildrenWithAge: { hasChildren: { title: 'Custom label' } } },
}

export function MyForm() {
  return (
    <Form.Handler translations={myTranslations}>
      <ChildrenWithAge />
    </Form.Handler>
  )
}