S
Documentation

Conditional Logic

Show or hide questions and pages based on the respondent's answers using the visibleIf property and a simple expression syntax.

Syntax

Condition expressions reference other question answers using curly braces: {questionId}. The expression is evaluated against the current answers map.

Syntaxtypescript
// Basic syntax
visibleIf: "{questionId} === 'value'"

// Variable references
{questionId}  →  replaced with the answer value at runtime

Operators

OperatorDescriptionExample
===Strict equality{role} === 'admin'
!==Strict inequality{role} !== 'guest'
>Greater than{age} > 18
<Less than{rating} < 3
>=Greater than or equal{score} >= 50
<=Less than or equal{rating} <= 2
&&Logical AND{age} > 18 && {consent} === true
||Logical OR{role} === 'admin' || {role} === 'editor'
!Logical NOT (truthy check)!{optOut}

Question-Level Conditions

Set visibleIf on a question to conditionally show it:

Question Conditiontypescript
{
  id: 'satisfaction',
  type: 'radio',
  label: 'How satisfied are you?',
  options: [
    { label: 'Satisfied', value: 'satisfied' },
    { label: 'Neutral', value: 'neutral' },
    { label: 'Dissatisfied', value: 'dissatisfied' },
  ],
},
{
  id: 'feedback',
  type: 'textarea',
  label: 'What went wrong?',
  // Only visible when the user selects "dissatisfied"
  visibleIf: "{satisfaction} === 'dissatisfied'",
}

Page-Level Conditions

Set visibleIf on a page to conditionally include the entire page:

Page Conditiontypescript
{
  id: 'detailed-feedback',
  title: 'Detailed Feedback',
  // This entire page only appears if rating is 3 or below
  visibleIf: "{rating} <= 3",
  questions: [
    { id: 'issues', type: 'checkbox', label: 'Select all that apply', options: [...] },
    { id: 'details', type: 'textarea', label: 'Tell us more' },
  ],
}

Combining Conditions

Combined Conditionstypescript
// AND — both conditions must be true
visibleIf: "{age} >= 18 && {consent} === true"

// OR — either condition can be true
visibleIf: "{role} === 'manager' || {role} === 'director'"

// Complex — combining AND and OR
visibleIf: "{country} === 'US' && ({state} === 'CA' || {state} === 'NY')"

Truthy Checks

Reference a question without a comparison operator to check if it has a truthy value:

Truthy Checkstypescript
// Show if "email" has any value
visibleIf: "{email}"

// Show if "optOut" is NOT truthy
visibleIf: "!{optOut}"

Number Comparisons

Number Comparisontypescript
{
  id: 'age',
  type: 'number',
  label: 'Your age',
},
{
  id: 'guardian',
  type: 'text',
  label: 'Guardian name',
  visibleIf: "{age} < 18",  // numbers compared numerically
}

Programmatic Evaluation

You can use the evaluateCondition function directly from the core module:

evaluateConditiontypescript
import { evaluateCondition } from 'react-minimal-survey-builder/core';

const answers = { role: 'admin', age: 25 };

evaluateCondition("{role} === 'admin'", answers);         // true
evaluateCondition("{age} >= 18", answers);                // true
evaluateCondition("{role} === 'admin' && {age} > 30", answers);  // false

Important Notes

  • - If a condition fails to evaluate (syntax error), the question is shown by default.
  • - Hidden questions are excluded from validation — users won't be blocked by invisible required fields.
  • - Conditions are re-evaluated automatically whenever any answer changes.
  • - Circular dependencies are not detected — avoid referencing questions that depend on each other.