FormulaBuilder

Basic Usage

Drag variables and operators into the canvas, or click them to append. Reorder tokens by dragging within the canvas. Remove tokens with the X button.

Variables

Operators

Formula

Drag variables and operators here to build a formula

With Validation

Enable showValidation to display errors for malformed expressions.

Variables

Operators

Formula

Drag variables and operators here to build a formula

Pre-filled Formula

Pass an initial value to pre-populate the canvas.

Variables

Operators

Formula

Drag variables and operators here to build a formula

Disabled

All interaction is blocked when disabled is set.

Variables

Operators

Formula

Drag variables and operators here to build a formula

FormulaBuilder

A drag-and-drop formula builder that lets users compose expressions from variable blocks and math operators.

Usage

import { FormulaBuilder } from "@/components/ui/formula-builder"

const variables = {
  height: "Person height",
  weight: "Person weight",
  age: "Person age",
}

<FormulaBuilder
  variables={variables}
  value={formula}
  onChange={setFormula}
/>

Props

Prop	Type	Default	Description
variables*	Record<string, string>	—	Dictionary of variable keys to display labels (e.g. { height: "Person height" }).
value	string	—	Controlled formula string, space-separated (e.g. "height * age / weight").
onChange	(formula: string) => void	—	Callback fired when the formula changes.
operators	string[]	["+", "-", "*", "/", "(", ")"]	Operators available in the palette.
placeholder	string	"Drag variables and operators here…"	Placeholder text shown when the formula canvas is empty.
disabled	boolean	false	Disables all interaction (drag, click, remove).
showValidation	boolean	false	Show validation errors for consecutive operators, unbalanced parentheses, etc.
className	string	—	Additional className applied to the root container.