A broad collection of examples with working code you can use in your project today.

    Forms & structure

    Add classes to the FormKit-provided submit button

    The form type automatically adds a submit button. Add classes so its UI can conform to your project's styles

    Using a list to repeat an input

    Using the list type, we can create repeater inputs that can have multiple values. This example uses a loop to let users add/remove email addresses.


    Conditionally show input based on value of another input

    Use the FormKitSchema component to conditionally show an input (with validation rules) based on the value of another input.

    Multi-step form built from Schema

    Use the FormKitSchema component to render the multi-step form from the multi-step form guide.


    Add an asterisk to the labels of all required inputs

    Use a plugin to add an asterisk (*) to the label area of inputs that have the "required" rule.

    Make number inputs return number values

    Use a plugin to cast string values to numbers. Useful if you want inputs of type number to return a JS Number primitive.

    Remove the inner wrapper on all checkboxes

    Use a plugin to modify the HTML of all descendant checkbox inputs.

    Add an icon before validation messages

    Use a plugin to append an icon before validation messages by extending the schema definition.

    Set initial values to empty strings instead of undefined

    Use a plugin to set all initial input values to an empty string "" instead of undefined .

    Automatically set an input's name, label, and help text based on the id

    Use a plugin to automatically set an input's name , label , and help props based on the id . Reduces repetitive prop declarations in your HTML.

    Scroll to the first validation or error on the form.

    A plugin that automatically scrolls to the first error on the page on submit or when backend errors are added.


    Number input with custom step buttons

    A custom input with +1 and -1 step buttons. Made using createInput() .

    Add a link (<a> tag) to a label

    Use slots or the :sections-schema feature to modify a label's HTML.

    Conditionally update options of a select input

    Conditionally update the options of a select input based on the value of another input.

    User interface

    Add transitions to validation messages

    Add transitions to validation messages by injecting a Vue TransitionGroup component using FormKit's :sections-schema .

    Starter project with Nuxt, FormKit, and Tailwind

    A working starter project on StackBlitz with Nuxt, FormKit and Tailwind CSS.

    Produce dynamic classes based on an input's state

    Use the rootClasses config function and FormKit props to produce a dynamic classes based on input state. Helpful for Tailwind and other CSS utility libraries.

    Create reactive UI variations of FormKit inputs using “features”

    Create UI variations of FormKit inputs (like buttons) that update based on reactive data in your components.