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:
Let’s take a quick look at an example and we'll pick it up on the other side:
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
$cmp properties — which represent HTML element and component respectively. This array is then passed as a prop to the
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
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:
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.