How do I reference the value of a FormKit input element to use in schema component (vuejs component)?

Question

I am using a FormKit schema:

  {
    $formkit: "select",
    name: "color",
    label: "Color",
    id: "manufacturer",
    outerClass: "mb-3",
    inputClass: "form-control",
    labelClass: "form-label",
    options: {
      red: "Red",
      other: "Other",
    },
  },

  {
    $cmp: "ColorSwatch",
    props: {
      color: "$color.value",
    },
  },

I want to then reference the value of the "color" field to use in a component inside the schema.

How do I do reference a feidl in the scehema to be passed ot the "$cmp" prop?

I have tried the code above and I have looked in the docs, but I am not seeing anything in the docs. Is this even possible?

Answer 1

You can use $get function in your schema.

The schema format has one built-in function specific to FormKit Inputs: the $get function. This builtin allows the schema to access the context object of any other FormKit Input (even outside the immediate form) — provided the input in question has an explicitly declared id prop.

from docs Accessing other inputs

  {
    $formkit: "select",
    name: "color",
    label: "Color",
    id: "manufacturer",
    outerClass: "mb-3",
    inputClass: "form-control",
    labelClass: "form-label",
    options: {
      red: "Red",
      other: "Other",
    },
  },

  {
    $cmp: "ColorSwatch",
    props: {
      color: "$get(manufacturer).value",
    },
  },

Here is playground: https://formkit.link/9f31862263fcd6d3f3fa7581da4d061f