<Conditional>

Search

Table of contents

A <Conditional> can be used to optionally display their children. See the 'Conditional Rules' section for more.

Use of <Conditional>

<Conditional rules={[]}>[any nodes to conditonally display]</Conditional>

Conditional rules

<Page>s and <Conditional> can have conditional logic, which is an array of conditional rules.

[
  {
    type: 'ConditionalRule',
    target: { type: 'TargetByField', id: 'stable-field-id' },
    comparison: '=',
    matchesValue: 'chosen value',
  },
  {
    type: 'ConditionalRule',
    target: { type: 'TargetByField', id: 'stable-field-id2' },
    comparison: '=',
    matchesValue: 'chosen value',
  },
]

In the array of rules all conditional rules must match for a condition to be true.

<Conditional>'s props

PropAboutType
rules

An array of Conditional Rules.

All rules need to pass for the condition to be valid.

E.g.

[
  {
   type: 'ConditionalRule',
   target: { type: 'TargetByField', id: 'cat-or-dog' },
   comparison: '=',
   matchesValue: 'Dogs',
  },
  {
   type: 'ConditionalRule',
   target: { type: 'TargetByField', id: 'animal-name' },
   comparison: '=',
   matchesValue: 'tama',
  },
]
ConditionalRule[]
id

Component Id.

Must be unique within the form.

string
childrenById

Used to indicate children ids of this component.

If used in React this is non-editable.

string[]
hasChildrenById

Non-editable.

Used to indicate that this component can have children.

true
hasTagsById

Non-editable.

Used to indicate that this component isn't a form field with tags by id.

false
isFormField

Non-editable.

Used to indicate that this component isn't a form field.

false
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
type

Non-editable.

Type of component of "Conditional".

"Conditional"