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)

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

With info

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

Label size

Heading

Legend with medium heading size
<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

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

Horizontal layout with info

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

With label and label description (vertical only)

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

With label description (vertical only)

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

Responsive forms

Label
<FieldBlock label="Label">
  <Flex.Container>
    <Flex.Item
      span={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.Name.First path="/firstName" width="medium" minLength={2} />
    </Flex.Item>
    <Flex.Item
      span={{
        small: 12,
        large: 'auto',
      }}
    >
      <Field.Name.Last path="/lastName" width="medium" required />
    </Flex.Item>
    <Flex.Item
      span={{
        small: 12,
        large: 'auto',
      }}
    >
      <FieldBlock width="large">
        <Slider
          min={1900}
          max={new Date().getFullYear()}
          step={1}
          value={2010}
          label="Birth year"
          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

<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>

Status position above

Shows warning and info visually above the field by using statusPosition="above".

Warning messageInfo message
<Field.String
  label="Field with status above"
  warning="Warning message"
  info="Info message"
  statusPosition="above"
/>

Inline help button (vertical only)

<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.

<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.

<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.

<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
<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.

<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.

<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

Default width (no width props). This label is long so we can validate that the label can be longer.
Contents
Small (affects outer block element).
Contents
Medium (affects outer block element).
Contents
Large (affects outer block element).
Contents
Custom (affects outer block element).
Contents
Stretch (affects outer block element). This label is long so we can validate that the label also stretches full width.
Contents
Small (affects contents only). This label is long so we can validate that the label can be longer.
Contents
Medium (affects contents only). This label is long so we can validate that the label can be longer.
Contents
Large (affects contents only). This label is long so we can validate that the label can be longer.
Contents
Custom (affects contents only). This label is long so we can validate that the label can be longer.
Contents
Stretch (affects contents only). This label is long so we can validate that the label can be longer.
Contents
Left content
Right content