A broad collection of examples with working code you can use in your project today.
The
form
type automatically adds a submit button. Add classes so its UI can conform to your project's styles
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.
Use the
FormKitSchema
component to conditionally show an input (with validation rules) based on the value of another input.
Use the
FormKitSchema
component to render the multi-step form from the multi-step form guide.
Use a plugin to cast string values to numbers. Useful if you want inputs of type
number
to return a JS
Number
primitive.
Use a plugin to modify the HTML of all descendant checkbox inputs.
A custom input with +1 and -1 step buttons. Made using
createInput()
.
Add transitions to validation messages by injecting a Vue
TransitionGroup
component using FormKit's
:sections-schema
.
A working starter project on StackBlitz with Nuxt, FormKit and Tailwind CSS.
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.