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:

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

    Load Live Example

    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.

    Full Schema docs
    This page serves as an introduction to the schema. To learn more about the advanced features of the FormKit schema, read the full schema documentation.

    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.

    Load Live Example

    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.

    When using the $formkit shorthand the props object is flattened with the top-level properties (siblings of $formkit) For example:

    Load Live Example

    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.

    Load Live Example