Skip to content
Home

ValueBlock

Info
Demos
Properties

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.
This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='small': This label is long so we can validate that the label can be longer.
This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='medium': This label is long so we can validate that the label can be longer.
This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='large': This label is long so we can validate that the label can be longer.
This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='auto': This label is long so we can validate that the label can be longer.
This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.