Skip to content
Home

FieldBlock

Info
Demos
Properties

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

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.

Demos

Label only (default layout)

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

With info

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

Label size

Heading

Code Editor
<Form.Handler>
  <Flex.Stack>
    <Form.MainHeading>Heading</Form.MainHeading>
    <FieldBlock label="Legend with medium heading size" labelSize="medium">
      <Field.String
        label="Label with a long text that goes beyond the field"
        width="medium"
      />
    </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

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

With label and label description (vertical only)

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

With label description (vertical only)

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

Responsive forms

This is what is wrong...
Code Editor
<FieldBlock label="Label">
  <Flex.Container>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.Name.First path="/firstName" width="medium" minLength={2} />
    </Flex.Item>
    <Flex.Item
      size={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.Name.Last path="/lastName" 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>

Combine error messages

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

Code Editor
<Field.Composition>
  <Field.Number
    width="small"
    label="Number"
    value={99}
    minimum={100}
    validateInitially
  />
  <Field.String
    width="medium"
    label="Text"
    value="Text"
    minLength={5}
    validateInitially
  />
</Field.Composition>

Inline help button (vertical only)

Code Editor
<Flex.Stack>
  <Field.String
    label="Ønsket lånebeløp"
    help={{
      title: 'Hva betyr lånebeløp?',
      content: (
        <>
          Dette er hvor mye du har tenkt å låne{' '}
          <Anchor href="#test">totalt</Anchor>.
        </>
      ),
    }}
    onChange={async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
    }}
  />
  <Field.String
    label="Ønsket lånebeløp"
    multiline
    rows={3}
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  />
</Flex.Stack>

Inline help button (with label and label description)

Hva betyr lånebeløp?

Dette er hvor mye du har tenkt å låne totalt.

Code Editor
<Flex.Stack>
  <Field.String
    label="Ønsket lånebeløp"
    labelDescription="Description Nisi ad ullamco ut anim proident sint eiusmod."
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
    onChange={async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
    }}
  />
  <Field.String
    label="Ønsket lånebeløp"
    labelDescription="Description"
    multiline
    rows={3}
    help={{
      open: true,
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  />
</Flex.Stack>

Inline help button (with label description)

Hva betyr lånebeløp?

Dette er hvor mye du har tenkt å låne totalt.

Code Editor
<Flex.Stack>
  <Field.String
    labelDescription="Description Nisi ad ullamco ut anim proident sint eiusmod."
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
    onChange={async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
    }}
  />
  <Field.String
    labelDescription="Description"
    multiline
    rows={3}
    help={{
      open: true,
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  />
</Flex.Stack>

Inline help button (vertical label description)

Hva betyr lånebeløp?

Dette er hvor mye du har tenkt å låne totalt.

Code Editor
<Form.Card>
  <Field.String
    label="Ønsket lånebeløp"
    labelDescription="Description"
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
    onChange={async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
    }}
  />
  <Field.String
    label="Ønsket lånebeløp"
    labelDescription="Description"
    multiline
    rows={3}
    help={{
      open: true,
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  />
</Form.Card>

Inline help button (horizontal label)

Hva betyr lånebeløp?

Dette er hvor mye du har tenkt å låne totalt.

Info message
Info message
Info message
Code Editor
<Form.Card>
  <Field.String
    label="Ønsket lånebeløp"
    layout="horizontal"
    help={{
      open: true,
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
    info="Info message"
    onChange={async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
    }}
  />
  <Field.String
    label="Ønsket lånebeløp"
    layout="horizontal"
    layoutOptions={{
      width: '8rem',
    }}
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
    info="Info message"
  />
  <Field.String
    label="Ønsket lånebeløp"
    layout="horizontal"
    layoutOptions={{
      width: '8rem',
    }}
    multiline
    rows={3}
    help={{
      title: 'Hva betyr lånebeløp?',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
    info="Info message"
  />
</Form.Card>

Inline help button (composition fields)

Field.Composition

Hva betyr lånebeløp?

Dette er hvor mye du har tenkt å låne totalt.

Code Editor
<Form.Card>
  <Field.Composition label="Field.Composition" width="large">
    <Field.String
      width="medium"
      label="Label"
      help={{
        title: 'Hva betyr lånebeløp? ',
        content: 'Dette er hvor mye du har tenkt å låne totalt.',
      }}
    />
    <Field.String
      width="stretch"
      label="Label"
      help={{
        title: 'Hva betyr lånebeløp? ',
        content: 'Dette er hvor mye du har tenkt å låne totalt.',
      }}
    />
  </Field.Composition>
  <Field.PostalCodeAndCity
    help={{
      title: 'Hva betyr lånebeløp? ',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  />
  <Field.PhoneNumber
    help={{
      open: true,
      title: 'Hva betyr lånebeløp? ',
      content: 'Dette er hvor mye du har tenkt å låne totalt.',
    }}
  />
</Form.Card>

Inline help button with HTML

Help title

Help content with a Anchor.

Code Editor
<Flex.Stack>
  <Field.String
    label={<strong>Ønsket lånebeløp</strong>}
    labelDescription={
      <span>
        Label description with a <Anchor href="/">Anchor</Anchor>
      </span>
    }
    help={{
      open: true,
      title: <strong>Help title</strong>,
      content: (
        <>
          Help content with a <Anchor href="/">Anchor</Anchor>.
        </>
      ),
    }}
    onChange={async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000))
    }}
  />
</Flex.Stack>

Widths

Contents
Contents
Contents
Contents
Contents
Contents
Contents
Contents
Contents
Contents
Contents
Left content
Right content