#Visibility

#Import

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

#Description

The Form.Visibility component allows you to conditionally show or hide components based on the state of data or field validation. You can either provide the values directly via properties or let it read data from a surrounding Form.Handler. This enables dynamic visibility control based on the paths it points to.

#Iterate.Visibility

You can also use the Iterate.Visibility component to target relative paths (itemPath) within an Iterate.Array component.

#Data driven visibility

There are several properties you can use to control visibility, such as pathDefined, pathTruthy, pathTrue etc.

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

render(
  <>
    <Field.Boolean path="/myState" />
    <Form.Visibility pathTrue="/myState">
      show me when the data value is true
    </Form.Visibility>
  </>,
)

#Dynamic value driven visibility

You can also use the visibleWhen property to conditionally show the children based on the data value of the path.

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

render(
  <>
    <Field.Boolean path="/myState" />
    <Form.Visibility
      visibleWhen={{
        path: '/myState',
        hasValue: (value) => value === true,
      }}
    >
      show me when the data value is true
    </Form.Visibility>
  </>,
)

#Validation driven visibility

You can conditionally display children based on field validation by using the visibleWhen property with isValid: true:

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

render(
  <>
    <Field.Boolean path="/myField" />
    <Form.Visibility
      visibleWhen={{
        path: '/myField',
        isValid: true,
      }}
    >
      show me when the validation succeeds
    </Form.Visibility>
  </>,
)

To prevent visibility changes during user interactions like typing, it shows the children first when the field both has no errors and has lost focus (blurred). You can use the validateContinuously: true property to immediately show the children when the field has no errors.

#Accessibility

Children of the Form.Visibility component will be hidden from screen readers when visually hidden, even if keepInDOM is enabled. You don't need to do anything to make the content additionally inaccessible.

#Animate

You can use the animate property to animate the visibility change. It can be used in combination with keepInDOM.

import { Form } from '@dnb/eufemia/extensions/forms'
render(
  <>
    <Field.Boolean path="/myState" />
    <Form.Visibility pathTrue="/myState" animate>
      show me when the data value is true
    </Form.Visibility>
  </>,
)

#Keep in DOM

You can use the keepInDOM property to keep the content in the DOM, even if it's not visible or accessible. This can be useful for fields that still needs to run validation.

import { Form } from '@dnb/eufemia/extensions/forms'
render(
  <>
    <Field.Boolean path="/myState" />
    <Form.Visibility pathTrue="/myState" keepInDOM>
      show me when the data value is true
    </Form.Visibility>
  </>,
)

#Disable children fields when hidden

You can disable children fields when they are hidden by using the fieldPropsWhenHidden property. It will pass the given properties to the children when the visibility is hidden. It needs to be used in combination with the keepInDOM property.

import { Form } from '@dnb/eufemia/extensions/forms'
render(
  <>
    <Field.Boolean path="/myState" />
    <Form.Visibility
      pathTrue="/myState"
      keepInDOM
      fieldPropsWhenHidden={{ disabled: true }}
    >
      <Field.String />
    </Form.Visibility>
  </>,
)

Check out the Nested visibility example to see how you can use fieldPropsWhenHidden and keepInDOM.

#Why is this useful?

In some cases, you want to keep the content in the DOM, even if it's not visible. This can be useful for fields that still needs to run validation.

#Inherit visibility

By using the provider component Value.Provider, you can propagate the visibility (with the inheritVisibility property) of the parent to all nested values.

import { Form, Value } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Handler>
    <Value.Provider inheritVisibility>
      <Value.String path="/foo" />
      <Value.String path="/bar" />
    </Value.Provider>
  </Form.Handler>,
)