<Logic>
![](/_next/static/media/cross.059f776e.png)
![](/_next/static/media/button.da0a4bf5.png)
![](/_next/static/media/chevron-blur.7e0a6d48.png)
![](/_next/static/media/chevron.cf51b92f.png)
![](/_next/static/media/text-box.e3543c84.png)
![](/_next/static/media/radio.3314dc02.png)
![](/_next/static/media/checkbox-blur.ecf73f80.png)
A <Logic>
can be used to optionally display their children. See the 'Logic Rules' section for more.
Use of <Logic>
<Logic rules={[]}>[any nodes to conditonally display]</Logic>
Logic rules
<Page>
s and <Logic>
can have rules, 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 logic rules must match for a condition to be true.
<Logic>
's props
Prop | About | Type |
---|---|---|
hideInAnswerSummary | Whether to hide any answers below this. | boolean |
rules | An array of Conditional Rules. All rules need to pass for the condition to be valid. E.g.
| ConditionalRule[] |
id | Component Id. Must be unique within the form. | string |
meta | Arbitrary metadata on this node. This is useful when developing custom controls as it allows you to pass down metadata/extensions. | 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 | false |
type | Non-editable. Type of component of | "Logic" |