Skip to content
Home

ArraySelection

Info
Demos
Properties

Import

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

Description

Value.ArraySelection is a wrapper component for displaying string values, with user experience tailored for an array of selected values.

There is a corresponding Field.ArraySelection component.

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

Relevant links

Demos

Placeholder

No value given
Code Editor
<Value.ArraySelection placeholder="No value given" />

Value

Foo, Bar og Baz
Code Editor
<Value.ArraySelection value={['Foo', 'Bar', 'Baz']} />

Custom format

123, 456 or 789
Code Editor
<Form.Handler
  locale="en-GB"
  data={{
    myPath: [123, 456, 789],
  }}
>
  <Value.ArraySelection
    path="/myPath"
    format={{
      type: 'disjunction',
    }}
  />
</Form.Handler>

Label

Label text
Code Editor
<Value.ArraySelection label="Label text" showEmpty />

Label and value

Label textFoo, Bar og Baz
Code Editor
<Value.ArraySelection label="Label text" value={['Foo', 'Bar', 'Baz']} />

Inline

This is before the component Foo, Bar og Baz This is after the component

Code Editor
<P>
  This is before the component{' '}
  <Value.ArraySelection value={['Foo', 'Bar', 'Baz']} inline /> This is
  after the component
</P>

List variants

Ordered List
  1. Foo
  2. Bar
  3. Baz
Unordered List
  • Foo
  • Bar
  • Baz
Code Editor
<Value.ArraySelection
  value={['Foo', 'Bar', 'Baz']}
  label="Ordered List"
  variant="ol"
/>
<Value.ArraySelection
  value={['Foo', 'Bar', 'Baz']}
  label="Unordered List"
  variant="ul"
/>

List types

Ordered List a
  1. Foo
  2. Bar
  3. Baz
Ordered List A
  1. Foo
  2. Bar
  3. Baz
Ordered List i
  1. Foo
  2. Bar
  3. Baz
Ordered List I
  1. Foo
  2. Bar
  3. Baz
Unordered List square
  • Foo
  • Bar
  • Baz
Unordered List circle
  • Foo
  • Bar
  • Baz
Unordered List unstyled
  • Foo
  • Bar
  • Baz

Field.Option and Field.ArraySelection

When using the same path as on a Field.ArraySelection, the Field.Option title will be used as the displayed value.

My selections
My selectionsBar og Baz
Code Editor
<Form.Handler>
  <Flex.Stack>
    <Field.ArraySelection
      label="My selections"
      path="/myPath"
      value={['bar', 'baz']}
    >
      <Field.Option value="foo" title="Foo" />
      <Field.Option value="bar" title="Bar" />
      <Field.Option value="baz" title="Baz" />
    </Field.ArraySelection>

    <Value.ArraySelection inheritLabel path="/myPath" />
  </Flex.Stack>
</Form.Handler>