How to access and store FormKit's internal form state in a ref?

[vicentematus]

I'm trying to track FormKit's form state (valid/invalid/dirty) in a Vue ref to use it in other parts of my component. For example, If I want to know if the entire form is valid or no (boolean).

Current Setup

<script setup lang="ts">
const formState = ref() // How should I type and populate this?

</script>

<template>
  <FormKit
    type="form"
    v-model="formData"
    :plugins="[zodPlugin]"
    id="form-user"
  >
    <FormKit type="group" name="someGroup">
      <!-- form fields -->
    </FormKit>
  </FormKit>
</template>

What I've Tried

1. Using v-slot to access state:

<FormKit v-slot="{ state }">

This works in the template but I need to store/access this state in the script.

2. Using node prop:

const handleNode = (node: FormKitNode) => {
  const node = getNode('form-user')
}

But I can't seem to grasp where I can access the internal store of the form.

Question

What's the recommended way to:

1. Store FormKit's form state in a ref
2. Keep it in sync with the form's internal state
3. Access validation state (valid/invalid) outside the form component

Environment

• FormKit version: ^1.6.9
• Vue version: 3.5.13
• TypeScript

[justin-schroeder]

I would recommend using useFormKitContextById: https://formkit.com/inputs/form#useformkitcontextbyid

Then you can access it pretty simply: context.state

[vicentematus]

That was fast. Thank you Justin, I will try it 🫡

[vicentematus]

Works great. Appreciate it. For reference:

const isFormValid = computed(() => {
  return formContext.value?.state.valid;
});