Conditional Fields

    Demonstrates visible and disabled as functions — fields that appear or become interactive based on other field values, with no manual useWatch or conditional rendering in component code.

    For the full runtime semantics of hidden-from-start fields, defaultValue, and shouldUnregister, see the dedicated guide on conditional rendering.

    Preview & Code

    Preview
    Code
    Full Name *
    Preferred Contact Method
    Message

    How it works

    visible as a function — receives the current form values and returns a boolean. BlueForm evaluates it reactively on every value change:

    email: {
  visible: (values) => values.contact_method === "email",
}

    defaultValue on controlling fields — without a defaultValue, the select value starts as undefined, so visible conditions that depend on it won't evaluate correctly on first render. Always set a defaultValue that matches one of the options:

    contact_method: {
  defaultValue: "email",
}

    Conditional validation with validate — required runs regardless of visibility, so hidden fields can still block submission. Use validate instead, and short-circuit when the field is not relevant:

    email: {
  rules: {
    validate: (value, values) =>
      values.contact_method !== "email" || Boolean(value) || "Email is required",
  },
}

    The pattern is: if this field is not active, pass — otherwise check the value.

    No useWatch — conditional logic lives entirely in config. Field components never need to know about other fields or subscribe to form state changes themselves.

    Tip

    disabled works the same way as visible — pass a function instead of a boolean and BlueForm handles the reactivity. Unlike hidden fields, disabled fields are excluded from the submitted values by RHF automatically.