Computed Fields

    A computed field derives its value from other fields. Since BlueForm exposes onFieldChange with direct access to values and setValue, computed fields require no special API - just a callback.

    Preview & Code

    Preview
    Code
    Title
    Slug
    First name
    Last name
    Full name
    Weight (kg)
    Height (cm)
    BMI

    How it works

    onFieldChange={({ name, value, setValue }) => {
  if (name === "title") {
    setValue("slug", value?.toLowerCase().replace(/\s+/g, "-") ?? "")
  }
}}

    onFieldChange fires whenever a field value changes. Use setValue to write back to any field - including ones the user never touches directly. Mark computed fields readOnly: true to signal they are derived.

    Single-source - one field drives one computed field (title -> slug). Trigger on the source field name.

    Multi-source - multiple fields drive one computed field (weight + height -> bmi). Use values to read all dependencies at once instead of relying on the incoming value, which only reflects the field that just changed.

    Chained - a computed field drives another computed field. Avoid this - onFieldChange does not fire for setValue calls, so chains must be resolved in a single callback:

    onFieldChange={({ name, values, setValue }) => {
  if (name === "firstName" || name === "lastName") {
    const { firstName, lastName } = values
    const full = [firstName, lastName].filter(Boolean).join(" ")
    setValue("fullName", full)
    setValue("initials", full.split(" ").map(n => n[0]).join("").toUpperCase())
  }
}}
    Tip

    Computed fields participate in the submit payload like any other field. If you want to exclude a computed field from submission, use type: "hidden" with visible: false - or strip it in onSubmit.