Skip to content
Home

FieldBlock

Info
Demos
Properties

Description

FieldBlock is a reusable wrapper for building Field or Value 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 Card.

It can also be used to group multiple inner FieldBlock components, composing status (error) messages together as one component.

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


const YourFieldComponent = () => {
  return (
    <FieldBlock label="Legend" info="Info at the bottom">
      <Flex.Container>
        <FieldBlock label="Field A">...</FieldBlock>
        <FieldBlock label="Field B">...</FieldBlock>
      </Flex.Container>
    </FieldBlock>
  )
}

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>

Label size

Heading

Legend with medium heading size
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Form.MainHeading>Heading</Form.MainHeading>
    <FieldBlock label="Legend with medium heading size" size="medium">
      <Flex.Horizontal>
        <Field.String label="Label A" width="medium" />
        <Field.String label="Label B" width="medium" />
      </Flex.Horizontal>
    </FieldBlock>
  </Flex.Stack>
</Form.Handler>

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">
  <Flex.Horizontal>
    <Field.String width="small" minLength={3} />
    <Field.Number minimum={10} />
  </Flex.Horizontal>
</FieldBlock>

Combine error messages

Error messages from all fields inside the FieldBlock are combined as one message below the whole block

Code Editor
<FieldBlock>
  <Flex.Horizontal>
    <Field.Number width="small" label="Num" minimum={100} />
    <Field.String width="medium" label="Txt" minLength={5} />
  </Flex.Horizontal>
</FieldBlock>

Responsive forms

Label
Code Editor
<FieldBlock label="Label">
  <Flex.Container>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.String
        path="/firstName"
        label="First name"
        width="medium"
        minLength={2}
      />
    </Flex.Item>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.String
        path="/lastName"
        label="Last name"
        width="medium"
        required
      />
    </Flex.Item>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <FieldBlock width="large">
        <Slider
          min={1900}
          max={new Date().getFullYear()}
          step={1}
          value={2010}
          label="Birth year"
          label_direction="vertical"
          tooltip
          alwaysShowTooltip
        />
      </FieldBlock>
    </Flex.Item>
  </Flex.Container>
</FieldBlock>