Skip to content
Home

FieldBlock

Info
Properties

Description

FieldBlock is a reusable wrapper for building 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 FlexContainer or Card. It can also be used to group multiple inner FieldBlock component, composing error messages together as one component.

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

Demos

Label only (default layout)

Input features goes here
Code Editor
<FieldBlock label="Label text">Input features goes here</FieldBlock>

With info

Input features goes here
For your information
Code Editor
<FieldBlock label="Label text" info="For your information">
  Input features goes here
</FieldBlock>

Horizontal layout

Input features goes here
Code Editor
<FieldBlock label="Label text" layout="horizontal">
  Input features goes here
</FieldBlock>

Horizontal layout with info

Input features goes here
For your information
Code Editor
<FieldBlock
  label="Label text"
  layout="horizontal"
  info="For your information"
>
  Input features goes here
</FieldBlock>

Widths

Input feature
Input
Input feature
Input feature
Input
Input feature
Input feature
Code Editor
<FieldBlock label="Default width (no width props)">
  <TestElement>Input feature</TestElement>
</FieldBlock>
<FieldBlock label="Small (affects outer block element)" width="small">
  <TestElement>Input</TestElement>
</FieldBlock>
<FieldBlock label="Medium (affects outer block element)" width="medium">
  <TestElement>Input feature</TestElement>
</FieldBlock>
<FieldBlock label="Large (affects outer block element)" width="large">
  <TestElement>Input feature</TestElement>
</FieldBlock>
<FieldBlock label="Small (affects contents only)" contentsWidth="small">
  <TestElement>Input</TestElement>
</FieldBlock>
<FieldBlock
  label="Medium (affects contents only)"
  contentsWidth="medium"
>
  <TestElement>Input feature</TestElement>
</FieldBlock>
<FieldBlock label="Large (affects contents only)" contentsWidth="large">
  <TestElement>Input feature</TestElement>
</FieldBlock>

With description (vertical only)

Input features goes here
Code Editor
<FieldBlock label="Label text" labelDescription="Description text">
  Input features goes here
</FieldBlock>

With secondary

(vertical only)
Secondary text
Input features goes here
Code Editor
<FieldBlock label="Label text" labelSecondary="Secondary text">
  Input features goes here
</FieldBlock>

With description and secondary

(vertical only)
42
Input features goes here
Code Editor
<FieldBlock
  label="Label text"
  labelDescription="Description text"
  labelSecondary="42"
>
  Input features goes here
</FieldBlock>

Group multiple fields

For your information
Code Editor
<FieldBlock label="Label text" info="For your information">
  <Layout.Row>
    <Field.String width="small" minLength={3} />
    <Field.Number minimum={10} />
  </Layout.Row>
</FieldBlock>