If / Else

An if/else block routes a run down one of several branches by evaluating conditions against the data. The If / Else component renders that evaluation as a breakdown table: a summary of every branch (IF, ELSE IF, ELSE) and its verdict up top, then a per-branch breakdown of each comparison — the field, the operator, the expected and actual values, and whether it held. The branch that was taken is highlighted, and branches skipped because an earlier one matched are dimmed.

Sub-conditions are combined with the branch's logical operator (AND / OR), shown inline in the formula and colored green or red by outcome.

Usage

Pass a run describing the branches and which one was taken. Everything is presentation only — wire it to whatever your evaluation data looks like.

Copyimport { ConditionalBreakdownTable } from "@/registry/new-york-v4/blocks/conditional-block"
 
export function Example() {
  return (
    <div className="h-[520px] overflow-hidden rounded-xl border">
      <ConditionalBreakdownTable
        run={{
          selectedBranchId: "if",
          branches: [
            {
              id: "if",
              kind: "if",
              logicalOperator: "and",
              matched: true,
              subConditions: [
                {
                  path: "data.total_amount",
                  operator: "is_greater_than",
                  expected: 10000,
                  actual: 13541.34,
                  matched: true,
                },
              ],
            },
            { id: "else", kind: "else", matched: true, skipped: true },
          ],
        }}
      />
    </div>
  )
}

The ConditionalBlock export wraps the table with a sample evaluation so it renders on its own with no props.

API

ConditionalRun

BranchEval

SubConditionEval

Components