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 repeater 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 add an asterisk (*) to the label area of inputs that have the "required" rule.
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.
Use a plugin to append an icon before validation messages by extending the schema definition.
Use a plugin to set all initial input values to an empty string
""
instead of
undefined
.
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.
A custom input with +1 and -1 step buttons. Made using
createInput()
.
Use slots or the
:sections-schema
feature to modify a label's HTML.
Conditionally update the
options
of a
select
input based on the value of another input.
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.
Create UI variations of FormKit inputs (like buttons) that update based on reactive data in your components.