Skip to content
Home

Visibility

Info
Demos
Properties
Events

Import

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

Description

The Iterate.Visibility component allows you to conditionally display content based on relative paths (itemPath) within an Iterate.Array component.

Fore more details, head over to the Form.Visibility component documentation.

Demos

Basic example

Hide and show me item no. 2
Code Editor
<Form.Handler
  defaultData={{
    myList: [
      {
        toggleValue: false,
      },
      {
        toggleValue: true,
      },
    ],
  }}
>
  <Iterate.Array path="/myList">
    <Field.Boolean
      label="Show content for item no. {itemNo}"
      variant="checkbox"
      itemPath="/toggleValue"
    />
    <Iterate.Visibility pathTrue="/toggleValue" animate>
      <TestElement>
        <Iterate.ItemNo>
          {'Hide and show me item no. {itemNo}'}
        </Iterate.ItemNo>
      </TestElement>
    </Iterate.Visibility>
  </Iterate.Array>
</Form.Handler>