Skip to content
Home

Value.MultiSelection

Info
Demos
Properties

Import

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

Description

Value.MultiSelection displays the selected values from a Field.MultiSelection as a formatted list of titles.

There is a corresponding Field.MultiSelection component.

When used with a path, it automatically resolves values to their display titles via the co-rendered Field.MultiSelection. You can also provide title mappings directly via the data or dataPath props for standalone usage.

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

Relevant links

Demos

Value

Oslo, Stockholm og Copenhagen
<Value.MultiSelection value={['Oslo', 'Stockholm', 'Copenhagen']} />

Field.MultiSelection with path

When using the same path as on a Field.MultiSelection, titles are resolved automatically via field internals.

No cities selected
const cities = [
  {
    value: 'oslo',
    title: 'Oslo',
  },
  {
    value: 'stockholm',
    title: 'Stockholm',
  },
  {
    value: 'copenhagen',
    title: 'Copenhagen',
  },
  {
    value: 'helsinki',
    title: 'Helsinki',
  },
  {
    value: 'reykjavik',
    title: 'Reykjavik',
  },
]
render(
  <Form.Handler>
    <Flex.Stack>
      <Value.MultiSelection
        inheritLabel
        path="/myPath"
        placeholder="No cities selected"
      />

      <Field.MultiSelection
        label="Select cities"
        path="/myPath"
        data={cities}
      />
    </Flex.Stack>
  </Form.Handler>
)

With data prop

Resolve values to titles using the data prop.

Oslo og Copenhagen
const cities = [
  {
    value: 'oslo',
    title: 'Oslo',
  },
  {
    value: 'stockholm',
    title: 'Stockholm',
  },
  {
    value: 'copenhagen',
    title: 'Copenhagen',
  },
]
render(
  <Value.MultiSelection value={['oslo', 'copenhagen']} data={cities} />
)

With dataPath

Use dataPath to resolve titles from the data context without rendering a Field.MultiSelection.

Selected citiesOslo og Copenhagen
<Form.Handler
  data={{
    myItems: [
      {
        value: 'oslo',
        title: 'Oslo',
      },
      {
        value: 'stockholm',
        title: 'Stockholm',
      },
      {
        value: 'copenhagen',
        title: 'Copenhagen',
      },
    ],
    myPath: ['oslo', 'copenhagen'],
  }}
>
  <Value.MultiSelection
    label="Selected cities"
    path="/myPath"
    dataPath="/myItems"
  />
</Form.Handler>

Inline

This is before the component Oslo, Stockholm og Copenhagen This is after the component

<P>
  This is before the component{' '}
  <Value.MultiSelection
    value={['Oslo', 'Stockholm', 'Copenhagen']}
    inline
  />{' '}
  This is after the component
</P>

List variants

Ordered List
  1. Oslo
  2. Stockholm
  3. Copenhagen
Unordered List
  • Oslo
  • Stockholm
  • Copenhagen
<Value.SummaryList>
  <Value.MultiSelection
    value={['Oslo', 'Stockholm', 'Copenhagen']}
    label="Ordered List"
    variant="ol"
  />
  <Value.MultiSelection
    value={['Oslo', 'Stockholm', 'Copenhagen']}
    label="Unordered List"
    variant="ul"
  />
</Value.SummaryList>