Can you apply conditional logic to child elements with formkit?

Question

I am not quite sure I am understanding how this works or not.

I am using schema to build out an address auto complete setup.

I want to be able to show / hide the fields for manual input

This is what the form currently looks like

Initially, I want the section in blue to be hidden and only shown if Can't find your address? is checked

This is my code currently

{
    $formkit: InputType.GROUP,
    name: 'address',
    label: label,
    children: [
      {
        $el: 'section',
        attrs: {
          class: 'mb-8 mt-8',
        },
        children: [
          {
            $el: 'h3',
            attrs: {
              class: `${labelClasses} mb-0`,
            },
            children: [label],
          },
          {
            $el: 'p',
            attrs: {
              class: 'text-sm font-normal mb-2',
            },
            children: [t('form.labels.address.help')],
          },
          {
            $formkit: InputType.ADDRESS_SEARCH,
            label: '',
            name: 'address',
            validation: 'required',
            classes: {
              outer: '!mb-2',
            },
          },
          {
            $formkit: InputType.CHECKBOX,
            label: t('form.labels.address.cant_find'),
            name: 'manual',
          },
          {
            $formkit: InputType.GROUP,
            name: 'address_details',
            label: 'address_details',
            children: [
              {
                $el: 'section',
                attrs: {
                  class: {
                    if: '$manual',
                    then: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-red-500',
                    else: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-blue-500',
                  },
                },
                children: [
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.street_address'),
                    name: 'street_address',
                    validation: 'required',
                    classes: {
                      outer: 'col-span-2 !mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.city'),
                    name: 'city',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.state'),
                    name: 'state',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.country'),
                    name: 'country',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  PostcodeSchema,
                ],
              },
            ],
          },
        ],
      },
    ],
  };

I am currently trailing by changing the text colour from blue to red based on the state of the $manual option

attrs: {
   class: {
     if: '$manual',
     then: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-red-500',
     else: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-blue-500',
   },
},

However, it never seems to be changing the colour when selecting the manual option.
It is as if its not registering the change.

I am using this playground example which seems to do what I want, but is not working for me.

What am I missing?

Answer 1

After some more investigation and playing around here, it turns out that you do need to supply the v-model and data attributes.

for me doing the following allowed it to start working

<template>
  <FormKit
    type="form"
    :actions="false"
    id="login"
    @submit="submit"
    v-model="data"
  >
    <FormKitSchema :schema="schema" :data="data" /> 
  </FormKit>
</template>

<script setup lang="ts">
import { Schema } from './schema.ts'

const data = ref({
  address: {
    manual: false,
  },
});
</script>