Skip to content
Home

SummaryList

Info
Demos
Properties

Import

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

Description

The Value.SummaryList component ensures that the wrapped Value.* components are rendered as definition lists, which helps maintain semantic correctness.

import { Value } from '@dnb/eufemia/extensions/forms'
render(
  <Value.SummaryList>
    <Value.String label="First value" path="/myValue" />
    <Value.String label="Second value" path="/mySecondValue" />
  </Value.SummaryList>,
)

Relevant links

Demos

With a default layout

Subheading

Fornavn
John
Etternavn
Doe
Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Doe',
  }}
>
  <Form.Card>
    <Form.SubHeading>Subheading</Form.SubHeading>

    <Value.SummaryList>
      <Value.Name.First path="/firstName" />
      <Value.Name.Last path="/lastName" />
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

With a Horizontal layout

Subheading

Fornavn
John
Etternavn
Doe
Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Doe',
  }}
>
  <Form.Card>
    <Form.SubHeading>Subheading</Form.SubHeading>

    <Value.SummaryList layout="horizontal">
      <Value.Name.First path="/firstName" />
      <Value.Name.Last path="/lastName" />
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

With a grid layout

Subheading

Fornavn
John
Etternavn
Doe
Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Doe',
  }}
>
  <Form.Card>
    <Form.SubHeading>Subheading</Form.SubHeading>

    <Value.SummaryList layout="grid">
      <Value.Name.First path="/firstName" />
      <Value.Name.Last path="/lastName" />
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

With a combined layout

Using Value.Composition to combine two or more Value.* components into one.

Subheading

Fornavn
John
Etternavn
Doe
Street
Osloveien
City
1234Oslo
Code Editor
<Form.Handler
  data={{
    firstName: 'John',
    lastName: 'Doe',
    streetName: 'Osloveien',
    streetNr: 12,
    postalCode: '1234',
    city: 'Oslo',
  }}
>
  <Form.Card>
    <Form.SubHeading>Subheading</Form.SubHeading>

    <Value.SummaryList>
      <Value.Name.First path="/firstName" />
      <Value.Name.Last path="/lastName" />

      <Value.Composition label="Street">
        <Value.String path="/streetName" />
        <Value.Number path="/streetNr" />
      </Value.Composition>

      <Value.Composition label="City">
        <Value.String path="/postalCode" />
        <Value.String path="/city" />
      </Value.Composition>
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

Inherit visibility

Code Editor
<Form.Handler>
  <Form.Card>
    <Field.Boolean
      variant="button"
      path="/isVisible"
      defaultValue={true}
    />

    <Form.Visibility pathTrue="/isVisible" animate>
      <Field.Name.First path="/foo" defaultValue="foo" />
      <Field.Name.Last path="/bar" defaultValue="bar" />
    </Form.Visibility>

    <Value.SummaryList inheritVisibility>
      <Value.Name.First path="/foo" />
      <Value.Name.First path="/bar" />
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

Inherit label

Code Editor
<Form.Handler>
  <Form.Card>
    <Field.String path="/foo" defaultValue="foo" label="foo label" />
    <Field.String path="/bar" defaultValue="bar" label="bar label" />

    <Value.SummaryList inheritLabel>
      <Value.String path="/foo" />
      <Value.String path="/bar" />
    </Value.SummaryList>
  </Form.Card>
</Form.Handler>

With animated Visibility

Below is a SummaryList containing two Value.* components. The second value will be shown and hidden with animation using the Form.Visibility component.

To maintain the semantic structure of the dl element, the Form.Visibility component animates the content of the dl element instead of wrapping it in a div element.

Label
First field
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Field.Boolean
      label="Make second field visible when toggled"
      path="/toggleValue"
      variant="checkbox"
    />

    <Form.Card>
      <Value.SummaryList>
        <Value.String label="Label" value="First field" />

        <Form.Visibility pathTrue="/toggleValue" animate>
          <Value.String label="Label" value="Second field" />
        </Form.Visibility>
      </Value.SummaryList>
    </Form.Card>
  </Flex.Stack>
</Form.Handler>

With Value.* components using help button

Vil foretaket være involvert i, eller drive virksomhet knyttet til virtuell valuta?

Virtuell valuta

For eksempel i forbindelse med veksling, oppbevaring, utvinning eller investering i kryptovaluta.

Nei
Skal foretaket drive med betalingsformidling som hovedvirksomhet eller som tilleggsvirksomhet til annen næring?

Betalingsformidling

For eksempel betalingsforetak, agent, filial eller tilsvarende virksomhet som krever konsesjon.

Nei
Er foretaket registreringspliktig hos Finanstilsynet?

Registreringspliktig

Driver virksomhet innenfor eiendomsmegling, inkasso, finans eller regnskapstjenester kan foretaket være regnskapspliktig.

Ja
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Form.Card>
      <Value.SummaryList>
        <Value.Boolean
          label={
            'Vil foretaket være involvert i, eller drive virksomhet knyttet til virtuell valuta?'
          }
          help={{
            open: true,
            title: 'Virtuell valuta',
            content:
              'For eksempel i forbindelse med veksling, oppbevaring, utvinning eller investering i kryptovaluta.',
          }}
          value={false}
        />
        <Value.Boolean
          label={
            'Skal foretaket drive med betalingsformidling som hovedvirksomhet eller som tilleggsvirksomhet til annen næring?'
          }
          help={{
            open: true,
            title: 'Betalingsformidling',
            content:
              'For eksempel betalingsforetak, agent, filial eller tilsvarende virksomhet som krever konsesjon.',
          }}
          value={false}
        />
      </Value.SummaryList>
      <Value.Boolean
        label={'Er foretaket registreringspliktig hos Finanstilsynet?'}
        help={{
          open: true,
          title: 'Registreringspliktig',
          content:
            'Driver virksomhet innenfor eiendomsmegling, inkasso, finans eller regnskapstjenester kan foretaket være regnskapspliktig.',
        }}
        value={true}
      />
    </Form.Card>
  </Flex.Stack>
</Form.Handler>