Theme

Docs Navigation

Examples

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 inputs that can have multiple values. This example uses a loop to let users add/remove email addresses.

Schema

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.

Plugins

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.

Inputs

Number input with custom step buttons

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

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.