ValueBlock#

Import#

import { ValueBlock } from '@dnb/eufemia/extensions/forms'
render(<ValueBlock />)

Description#

ValueBlock is a reusable wrapper for building Value components.

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

const MyValueComponent = ({ value }) => (
  <ValueBlock label="Label">{value}</ValueBlock>
)

Relevant links#

Check out the docs for the useValueProps hook. It will connect your value component to the data context.

For combining several value components into one, you can use Value.Composition.

Demos#

Label textData-value goes here

<ValueBlock label="Label text">Data-value goes here</ValueBlock>

Inline#

this is before the value Foo Bar this is after the value

<P>
  this is before the value <ValueBlock inline>Foo</ValueBlock>{' '}
  <ValueBlock inline>Bar</ValueBlock> this is after the value
</P>

Help button#

Label textData-value goes here

<ValueBlock
  label="Label text"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
>
  Data-value goes here
</ValueBlock>

Help button with HTML#

Label text with a long label label – lorem ipsum dolor sit

Help title

Help content with a Anchor.

Data-value goes here – lorem ipsum dolor sit amet consectetur.

<ValueBlock
  label="Label text with a long label label – lorem ipsum
        dolor sit"
  help={{
    open: true,
    title: <strong>Help title</strong>,
    content: (
      <>
        Help content with a <Anchor href="/">Anchor</Anchor>.
      </>
    ),
  }}
>
  Data-value goes here – lorem ipsum dolor sit amet consectetur.
</ValueBlock>

Widths#

No maxWidth: This label is long so we can validate that the label can be longer until it will wrap.