Skip to content
Home

Visibility

Info
Properties

Description

The Visibility component makes it possible to show or hide components on the screen based on the state of data. It can either be fed with the values directly via props, or it can read data from a surrounding Form.Handler and show or hide components based on the data it points to.

Demos

Direct properties

This is visible
Code Editor
<Visibility visible={true}>This is visible</Visibility>

False (not visible)

Code Editor
<Visibility
  visible={
    {
      foo: 'foo',
    }.foo === 'bar'
  }
>
  This is not visible
</Visibility>

Based on DataContext

This will show, as long as `toBe` is true.

Code Editor
<Form.Handler
  data={{
    toBe: true,
    notToBe: false,
  }}
>
  <Visibility pathTrue="/toBe">
    <P>This will show, as long as `toBe` is true.</P>
  </Visibility>
  <Visibility pathTrue="/notToBe">
    <P>This will not show until `notToBe` is true.</P>
  </Visibility>
</Form.Handler>