Form generation

FormKit ships with first-class support for generating forms using a JSON-compatible schema. This makes it possible to store generated forms in databases, files, or heck a QR code if you really want to. To generate a form, pass your schema to the <FormKitSchema> component using the :schema prop. The <FormKitSchema> component is not registered globally by default — you will need to import it:

import { FormKitSchema } from '@formkit/vue'

Let’s take a quick look at an example and we'll pick it up on the other side:

[
  {
    $el: 'h1',
    children: 'Register'
  },
  {
    $formkit: 'text',
    name: 'email',
    label: 'Email',
    help: 'This will be used for your account.',
    validation: 'required|email'
  },
  {
    $formkit: 'password',
    name: 'password',
    label: 'Password',
    help: 'Enter your new password.',
    validation: 'required|length:5,16'
  },
  {
    $formkit: 'password',
    name: 'password_confirm',
    label: 'Confirm password',
    help: 'Enter your new password again to confirm it.',
    validation: 'required|confirm',
    validationLabel: 'password confirmation',
  },
  {
    $formkit: 'checkbox',
    name: 'eu_citizen',
    id: 'eu',
    label: 'Are you a european citizen?',
  },
  {
    $formkit: 'select',
    if: '$get(eu).value', // 👀 Oooo, conditionals!
    name: 'cookie_notice',
    label: 'Cookie notice frequency',
    options: {
      refresh: 'Every page load',
      hourly: 'Ever hour',
      daily: 'Every day'
    },
    help: 'How often should we display a cookie notice?'
  }
]

Schema

FormKit's schema is a JSON-serializable data format for storing DOM structures and component implementations, including FormKit forms. Schemas support advanced features like conditional logic, boolean operators, loops, slots, and data scoping — all guaranteed to serialize to a string.

A schema is an array of objects (schema nodes) — where each "node" is either an HTML element or a component. The node type is determined by using the $el or $cmp properties — which represent HTML element and component respectively. This array is then passed as a prop to the <FormKitSchema> component.

FormKit inputs

FormKit’s schema is most frequently used to generate forms (although it is not limited to that use case). For example, if you wanted to render a FormKit email input, you would use the $cmp node.

<FormKitSchema
  :schema="[
    {
      $cmp: 'FormKit',
      props: {
        type: 'email',
        label: 'Email address',
      }
    }
  ]"
/>

Shorthand

While this syntax is generalized (it works for any Vue component) it is somewhat verbose when creating lots of FormKit inputs. To make this easier, FormKit supports a third node type $formkit, which is syntactic sugar for the full $cmp format shown above. For example:

<FormKitSchema
  :schema="[
    {
      $formkit: 'email',
      label: 'Email address',
    }
  ]"
/>

Forms

To render a form element, you can either use the $formkit: 'form' schema node, or wrap your <FormKitSchema> component in a <FormKit type="form"> component.

<template>
<FormKit type="form">
  <FormKitSchema :schema="schema" />
</FormKit>
</template>

<script setup>
const schema = [
  {
    $formkit: 'email',
    label: 'Email address',
    validation: 'required'
  }
]
</script>