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.

FieldBlock renders status messages after its contents in the DOM. This order lets grouped messages include nested fields in server-rendered HTML. The statusPosition="above" property changes only the visual position; it does not change the DOM order.

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
Input features goes here
For your information
<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
Input features goes here
For your information
<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". The messages remain after the field contents in the DOM.

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
Suggest an edit