Skip to content
Home

Field.ArraySelection

Info
Demos
Properties
Events

Import

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

Description

Field.ArraySelection is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.

Before using this component, ensure there is not a more specific field component available that better suits your needs.

Uses the Field.Option pseudo-component to define options.

There is a corresponding Value.ArraySelection component.

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


render(
  <Field.ArraySelection>
    <Field.Option />
    <Field.Option />
  </Field.ArraySelection>
)

You can also use the dataPath property to provide the data to the component:

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


render(
  <Form.Handler
    data={{
      myDataPath: [
        { title: 'Foo!', value: 'foo' },
        { title: 'Bar!', value: 'bar' },
      ],
    }}
  >
    <Field.ArraySelection dataPath="/myDataPath" />
  </Form.Handler>
)

Relevant links

Demos

Checkbox variant (default)

Code Editor
<Field.ArraySelection
  onFocus={(value) => console.log('onFocus', value)}
  onBlur={(value) => console.log('onBlur', value)}
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Fooo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button variant

Code Editor
<Field.ArraySelection
  variant="button"
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Fooo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button with checkbox variant

Code Editor
<Field.ArraySelection
  variant="checkbox-button"
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Fooo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox variant demos

Checkbox label

Label text
Code Editor
<Field.ArraySelection
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Fooo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox option selected

Code Editor
<Field.ArraySelection
  value={['bar']}
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox horizontal layout

Label text
Code Editor
<Field.ArraySelection
  label="Label text"
  value={['bar']}
  layout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox horizontal options-layout

Label text
Code Editor
<Field.ArraySelection
  label="Label text"
  value={['bar']}
  optionsLayout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox horizontal layout and horizontal options-layout

Label text
Code Editor
<Field.ArraySelection
  label="Label text"
  value={['bar']}
  layout="horizontal"
  optionsLayout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox with help

Label text
Code Editor
<Field.ArraySelection
  label="Label text"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
</Field.ArraySelection>

Checkbox disabled

Label text
Code Editor
<Field.ArraySelection
  value={['bar']}
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox disabled options

Label text
Code Editor
<Field.ArraySelection
  value={['foo']}
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" disabled />
  <Field.Option value="baz" title="Bazz!" disabled />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox info

Label text
FYI
Code Editor
<Field.ArraySelection
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  info="FYI"
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox warning

Label text
I'm warning you...
Code Editor
<Field.ArraySelection
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  warning="I'm warning you..."
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox error

Label text
This is what is wrong...
Code Editor
<Field.ArraySelection
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Checkbox with nested fields and logic

You can nest other fields and show them based on your desired logic.

Make a selection

Checkbox with a path to populate the data

Populated by dataPath
Code Editor
<Form.Handler
  data={{
    myDataPath: [
      {
        title: 'Foo!',
        value: 'foo',
      },
      {
        title: 'Bar!',
        value: 'bar',
      },
      {
        title: 'Baz!',
        value: 'baz',
      },
    ],
  }}
>
  <Field.ArraySelection
    label="Populated by dataPath"
    dataPath="/myDataPath"
  />
</Form.Handler>

Checkbox with the data property

Populated by data
Code Editor
<Field.ArraySelection
  label="Populated by data"
  data={[
    {
      title: 'Foo!',
      value: 'foo',
    },
    {
      title: 'Bar!',
      value: 'bar',
    },
    {
      title: 'Baz!',
      value: 'baz',
    },
  ]}
/>

Checkbox with List composition

Use render prop children to compose each option with List and set selected state from the current field values.

Select one or more options
Code Editor
<Form.Handler
  defaultData={{
    selection: ['bar'],
    myDataPath: [
      {
        value: 'foo',
        title: 'Foo!',
        amount: 1234,
      },
      {
        value: 'bar',
        title: 'Baar!',
        amount: 5678,
      },
      {
        value: 'baz',
        title: 'Baz!',
        amount: 9999,
      },
    ],
  }}
>
  <Field.ArraySelection
    label="Select one or more options"
    variant="checkbox"
    path="/selection"
    dataPath="/myDataPath"
    width="large"
  >
    {({ value = [], options }) => {
      return (
        <List.Container>
          {options.map(({ value: optionValue, title, amount }) => {
            return (
              <List.Item.Basic
                key={optionValue}
                selected={value.includes(optionValue)}
              >
                <List.Cell.Start>
                  <Field.Option
                    key={optionValue}
                    value={optionValue}
                    title={title}
                  />
                </List.Cell.Start>
                <List.Cell.End>
                  <Value.Currency value={amount} />
                </List.Cell.End>
              </List.Item.Basic>
            )
          })}
        </List.Container>
      )
    }}
  </Field.ArraySelection>
</Form.Handler>

Button variant demos

Button Label

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Fooo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button option selected

Code Editor
<Field.ArraySelection
  variant="button"
  value={['bar']}
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button horizontal layout

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  value={['bar']}
  layout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button horizontal options-layout

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  value={['bar']}
  optionsLayout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button horizontal layout and horizontal options-layout

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  value={['bar']}
  layout="horizontal"
  optionsLayout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button with help

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  help={{
    title: 'Help title',
    content: 'Help content',
  }}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
</Field.ArraySelection>

Button disabled

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  value={['bar']}
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button disabled options

Label text
Code Editor
<Field.ArraySelection
  variant="button"
  value={['foo']}
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" disabled />
  <Field.Option value="baz" title="Bazz!" disabled />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button info

Label text
FYI
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  info="FYI"
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button warning

Label text
I'm warning you...
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  warning="I'm warning you..."
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button error

Label text
This is what is wrong...
Code Editor
<Field.ArraySelection
  variant="button"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
</Field.ArraySelection>

Button with a path to populate the data

Populated by dataPath
Code Editor
<Form.Handler
  data={{
    myDataPath: [
      {
        title: 'Foo!',
        value: 'foo',
      },
      {
        title: 'Bar!',
        value: 'bar',
      },
      {
        title: 'Baz!',
        value: 'baz',
      },
    ],
  }}
>
  <Field.ArraySelection
    variant="button"
    label="Populated by dataPath"
    dataPath="/myDataPath"
  />
</Form.Handler>

Button with the data property

Populated by data
Code Editor
<Field.ArraySelection
  variant="button"
  label="Populated by data"
  data={[
    {
      title: 'Foo!',
      value: 'foo',
    },
    {
      title: 'Bar!',
      value: 'bar',
    },
    {
      title: 'Baz!',
      value: 'baz',
    },
  ]}
/>

Button with nested fields and logic

You can nest other fields and show them based on your desired logic.

Make a selection
Code Editor
<Form.Handler>
  <Form.Card>
    <Field.ArraySelection
      variant="button"
      label="Make a selection"
      path="/mySelection"
    >
      <Field.Option value="nothing" title="Nothing" />

      <Field.Option value="showInput" title="Show an input" />
      <Form.Visibility
        visibleWhen={{
          path: '/mySelection',
          hasValue: (value) => {
            return Array.isArray(value)
              ? value.includes('showInput')
              : false
          },
        }}
        animate
        compensateForGap="auto" // makes animation smooth
      >
        <Section variant="info" innerSpace>
          <Field.String placeholder="Enter some value" />
        </Section>
      </Form.Visibility>

      <Field.Option
        value="showAdditionalOption"
        title="Show additional option"
      />
      <Form.Visibility
        visibleWhen={{
          path: '/mySelection',
          hasValue: (value) => {
            return Array.isArray(value)
              ? value.includes('showAdditionalOption')
              : false
          },
        }}
        animate
        compensateForGap="auto" // makes animation smooth
      >
        <Field.Option
          value="showMeMore"
          title="Show even more"
          bottom="x-small"
        />
        <Form.Visibility
          animate
          visibleWhen={{
            path: '/mySelection',
            hasValue: (value) => {
              return Array.isArray(value)
                ? value.includes('showMeMore')
                : false
            },
          }}
        >
          <Section variant="info" innerSpace>
            <Field.String placeholder="Enter more info" />
          </Section>
        </Form.Visibility>
      </Form.Visibility>
    </Field.ArraySelection>
  </Form.Card>
</Form.Handler>

Button with checkbox variant

Label text
Code Editor
<Field.ArraySelection
  label="Label text"
  value={['bar']}
  variant="checkbox-button"
  optionsLayout="horizontal"
  onChange={(values) => console.log('onChange', values)}
>
  <Field.Option value="foo" title="Foo!" />
  <Field.Option value="bar" title="Baar!" />
  <Field.Option value="baz" title="Bazz!" />
  <Field.Option value="qux" title="Quxx!" />
  <Field.Option value="quux" title="Quuux!" />
  <Field.Option value="quuz" title="Quuuuz!" />
  <Field.Option value="corge" title="Corge!" />
</Field.ArraySelection>