formkit.com Open in urlscan Pro
76.76.21.21  Public Scan

Form analysis
4 forms found in the DOM

Name: form_49 —

<form data-v-fe23b362="" autocomplete="off" class="formkit-form" id="input_58" name="form_49">
  <div data-v-fe23b362="" class="formkit-outer" data-family="text" data-type="email" data-empty="true">
    <div class="formkit-wrapper"><label class="formkit-label" for="input_59">Email</label>
      <div class="formkit-inner"><!----><!----><input autocomplete="off" class="formkit-input" type="email" name="email_50" id="input_59"><!----><!----></div>
    </div><!----><!---->
  </div>
  <div data-v-fe23b362="" class="formkit-outer" data-family="text" data-type="password" data-empty="true">
    <div class="formkit-wrapper"><label class="formkit-label" for="input_60">Password</label>
      <div class="formkit-inner"><!----><!----><input autocomplete="off" class="formkit-input" type="password" name="password_51" id="input_60"><!----><!----></div>
    </div><!----><!---->
  </div><!---->
  <div class="formkit-actions">
    <div class="formkit-outer" data-family="button" data-type="submit" data-empty="true"><!---->
      <div class="formkit-wrapper"><button class="formkit-input" type="submit" name="submit_52" id="input_61"><!----><!---->Submit<!----><!----></button></div><!---->
    </div>
  </div>
</form>

Name: form_13 —

<form data-v-fe23b362="" autocomplete="off" class="formkit-form" id="input_12" name="form_13">
  <div data-v-fe23b362="" class="formkit-outer" data-family="text" data-type="email" data-empty="true">
    <div class="formkit-wrapper"><label class="formkit-label" for="input_13">Email</label>
      <div class="formkit-inner"><!----><!----><input autocomplete="off" class="formkit-input" type="email" name="email_14" id="input_13"><!----><!----></div>
    </div><!----><!---->
  </div>
  <div data-v-fe23b362="" class="formkit-outer" data-family="text" data-type="password" data-empty="true">
    <div class="formkit-wrapper"><label class="formkit-label" for="input_14">Password</label>
      <div class="formkit-inner"><!----><!----><input autocomplete="off" class="formkit-input" type="password" name="password_15" id="input_14"><!----><!----></div>
    </div><!----><!---->
  </div><!---->
  <div class="formkit-actions">
    <div class="formkit-outer" data-family="button" data-type="submit" data-empty="true"><!---->
      <div class="formkit-wrapper"><button class="formkit-input" type="submit" name="submit_16" id="input_15"><!----><!---->Submit<!----><!----></button></div><!---->
    </div>
  </div>
</form>

Name: mc-embedded-subscribe-form — POST https://formkit.us16.list-manage.com/subscribe/post?u=97649538d11efe562355a58d0&id=e5982191dd&f_id=009f7be0f0

<form action="https://formkit.us16.list-manage.com/subscribe/post?u=97649538d11efe562355a58d0&amp;id=e5982191dd&amp;f_id=009f7be0f0" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" data-v-9aae5359="">
  <div data-v-9aae5359="">
    <div class="mc-field-group" data-v-9aae5359=""><label for="mce-EMAIL-OFmVLGGbcU:9" style="position:absolute;opacity:0;pointer-events:none;" data-v-9aae5359="">Email address</label><input id="mce-EMAIL-OFmVLGGbcU:9" type="email" required=""
        value="" name="EMAIL" class="required email" placeholder="Email address" data-v-9aae5359=""></div>
    <div hidden="true" data-v-9aae5359=""><!----></div>
    <div id="mce-responses" class="clear" data-v-9aae5359="">
      <div id="mce-error-response" class="response" style="display:none;" data-v-9aae5359=""></div>
      <div id="mce-success-response" class="response" style="display:none;" data-v-9aae5359=""></div>
    </div>
    <div style="position:absolute;left:-5000px;" aria-hidden="true" data-v-9aae5359=""><input type="text" name="b_97649538d11efe562355a58d0_e5982191dd" tabindex="-1" value="" data-v-9aae5359=""></div>
  </div>
</form>

Name: mc-embedded-subscribe-form — POST https://formkit.us16.list-manage.com/subscribe/post?u=97649538d11efe562355a58d0&id=e5982191dd&f_id=009f7be0f0

<form data-v-9aae5359="" action="https://formkit.us16.list-manage.com/subscribe/post?u=97649538d11efe562355a58d0&amp;id=e5982191dd&amp;f_id=009f7be0f0" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
  <div data-v-9aae5359="">
    <div data-v-9aae5359="" class="mc-field-group"><label data-v-9aae5359="" for="mce-EMAIL-OFmVLGGbcU_0" style="position: absolute; opacity: 0; pointer-events: none;">Email address</label><input data-v-9aae5359="" id="mce-EMAIL-OFmVLGGbcU_0"
        type="email" required="" name="EMAIL" class="required email" placeholder="Email address"></div>
    <div data-v-9aae5359="" hidden=""><input data-v-9aae5359="" type="hidden" name="tags" value="408555,3890656"></div>
    <div id="mce-responses" class="clear" data-v-9aae5359="">
      <div id="mce-error-response" class="response" style="display:none;" data-v-9aae5359=""></div>
      <div id="mce-success-response" class="response" style="display:none;" data-v-9aae5359=""></div>
    </div>
    <div style="position:absolute;left:-5000px;" aria-hidden="true" data-v-9aae5359=""><input type="text" name="b_97649538d11efe562355a58d0_e5982191dd" tabindex="-1" value="" data-v-9aae5359=""></div>
  </div>
</form>

Text Content

SearchK

DOCS

GETTING STARTED

What is FormKit?

Installation

Your first form

Community & support

ESSENTIALS

Inputs

Forms

Validation

Styling

Icons

Internationalization

Custom inputs

Schema

Configuration

Architecture

Examples

INPUTS

Autocomplete

Button

Checkbox

Color

ColorpickerNew

Date

Datepicker

Datetime-local

Dropdown

Email

File

Form

Group

Hidden

List

Mask

Meta

Month

Number

Password

Radio

Range

Rating

Repeater

Search

Select

Slider

Submit

Taglist

Telephone

Text

Textarea

Time

Toggle

Toggle ButtonsNew

Transfer List

URL

Week

PLUGINS

AutoAnimate

Auto-height textarea

Barcode input

Floating labels

Multi-step input

Save to localStorage

Zod validation

GUIDES

Build a multi-step form

Create a custom input

Create a Tailwind CSS theme

Export and restructure inputs

Optimizing for production

API REFERENCE

@formkit-addons

@formkit-core

@formkit-i18n

@formkit-inputs

@formkit-observer

@formkit-themes

@formkit-utils

@formkit-validation

@formkit-vue

@formkit-zod

Context object

TOOLS

Playground
Themes
Pro
i18n Locale Builder

ABOUT

About
What is FormKit?
Changelog
Privacy Policy
Terms of Service
 * 
 * 
 * 
 * 

 * Docs
    * Getting Started
    * Essentials
    * Inputs
    * Plugins
    * Guides
    * API Reference Changelog

 * Inputs
   Search and select a car brand
   
   BMW
   Honda
   Checkout my label
   You can use the label prop to set the text.
   Click me!
   You can bind event listeners.
   I am a single value checkbox
   Single-value checkboxes are side-by-side
   I am a multi-value checkbox
   Multi-value checkboxes are lists
    * Whoa that is neat
    * What a time saver
    * I like this feature
   
   Select a color
   
   Select your favorite color.
   Choose a color
   A professional colorpicker that supports Hex, RGBA, and HSLA formats as well
   as custom swatches
   HEX
   
   FormKit
   
   
   
   
   Other
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Birthday
   
   Enter your birth day
   Appointment date
   MMMM D, YYYY
   
   Book your SPA appointment.
   End of the world
   
   When will the end of the world take place?
   Which profession most interests you?
   Select your desired profession
   
   If money were no object, which profession would you choose?
   Student email address
   
   Please enter your student email address.
   Business expenses
    * purchase-order.pdf
    * itemized-list.json
   
   Remove all
   Select your business expense documents.
   Email
   
   Password
   
   Submit
   
   The group input type has no visual output — it is used to logically structure
   your nested input data as an object.
   
   The hidden input type has no visual output.
   
   The list input type has no visual output — it is used to logically structure
   your nested input data as an array.
   
   Phone number
   
   Please enter a phone number
   
   The meta input type has no visual output — it is used to add arbitrary data
   to your form data without creating new markup in the DOM.
   
   Birth month
   
   What month were you born?
   Thermostat
   
   What temperature should the house be?
   Password
   
   Enter a new password
   Preferred transportation
   How do you like to get around?
    * E-Bike
    * E-Scooter
    * Electric car
    * Walking
    * Space tube
   
   Volume
   
   Select your volume level.
   Enjoyment of reading
   
   Rate your enjoyment of reading as a leisure activity.
   Additional Guests
   Add the email addresses of guests you'd like to invite to the celebration.
    * Email
      
      * Move up
      * Remove
        
      * Move down
    * Email
      
      * Move up
      * Remove
        
      * Move down
   
   Add Additional Guests
   
   
   COMING SOON...
   
   Search
   
   What's your favorite planet?
   Select a planetMercuryVenusEarthMarsJupiterSaturnUranusNeptune
   Choose your nightly price range
   $0$250$500$750$1000$1250$1500$1750$2000
    * $500
      
    * $1200
      
   
   Minimum Price
   
   Maximum Price
   
   Checkout my label
   You can use the label prop to set the text.
   Click me!
   You can bind event listeners.
   Blog post tags
   Food & Drink
   Health & Wellness
   
   Tag your blog posts so we can surface related content to users.
   Phone number
   
   Your username
   
   Pick a username people will remember!
   Your Essay
   
   I'll know if you didn't read the book!
   Time
   
   What time will go home today?
   Pick your favorite ice cream flavors
   Ice cream flavors5
   
      
    * Vanilla
    * Chocolate
    * Strawberry
    * Mint Chocolate Chip
    * Cookies and Cream
      
   
   Add all valuesRemove all values
   Your favorites0
   
   Always show bookmarks bar
   T-shirt Size
    * Small
    * Medium
    * Large
    * X-Large
   
   Favorite website
   
   What is your favorite website?
   Vacation
   
   What week will you travel to Fiji?
   
   
   AUTOCOMPLETE
   
   The autocomplete Pro input that allows users to search and select from a
   customizable options list. Supports single and multi-value selections.
    * Autocomplete
      
    * Button
    * Checkbox
    * Color
    * Colorpicker
      
    * Date
    * Datepicker
      
    * Datetime-local
    * Dropdown
      
    * Email
    * File
    * Form
    * Group
    * Hidden
    * List
    * Mask
      
    * Meta
    * Month
    * Number
    * Password
    * Radio
    * Range
    * Rating
      
    * Repeater
      
    * Search
    * Select
    * Slider
      
    * Submit
    * Taglist
      
    * Telephone
    * Text
    * Textarea
    * Time
    * Toggle
      
    * Toggle Buttons
      
    * Transfer List
      
    * URL
    * Week

 * Playground
 * Pro


Theme


THE OPEN-SOURCE FORM FRAMEWORK FOR VUE

FormKit equips developers to build their forms 10x faster by simplifying form
structure, generation, validation, theming, submission, error handling, and
more.

Get started GitHub



A TINY DATA-FIRST DRAG AND DROP LIBRARY

FormKit Drag and Drop is a new open-source library that makes working with
drag-and-drop operations a breeze. It’s less than ~4kb and can be used in any
JavaScript application.


FORMKIT CONSULTING

Direct support from the FormKit team. Unlock the full potential of FormKit in
your project. All services provided in English.

Forms

Powerful form features for data flow, error handling, and state management.

Inputs

24+ accessible inputs powered by a single component.

Validation

20+ built-in validation rules and support for writing your own.

Styling

Use FormKit’s default Genesis CSS theme, Tailwind, or your own custom approach
with full control over every DOM element.

Schema

Generate forms with FormKit’s JSON-compatible dynamic schema. Fully serializable
for database storage.

Architecture

Engineered to handle the most demanding forms.


SUPPORTED BY

 * 
 * 
 * 
 * 
 * Your logo here

new — v.1.4.0


INTRODUCING FORMKIT THEMES

Open-source, MIT-licensed, Tailwind themes for FormKit.

Customize now



FORMS

Populate a form with a single objectAuto collects all input valuesApply backend
errors to forms and inputsAccess any form value without v-model Optionally
v-model an entire form with one objectAutomatic loading state for async
submissionsState tracking for invalid, loading, errors, and moreEasily disable
all inputs in a formForm resetStructure your data as objects, arrays, and scalar
values
Forms docs
1
2
3
4
5
6
7
8
9
10
11

<FormKit
  type="form"
  #default="{ value }"
  @submit="handleSubmit"
  :value="data"
>
  <FormKit
    type="text"
    label="Your Email"
    name="email"
    prefix-icon="email"










Render
HTML




Loading Example...


INPUTS

Entire structure in 1 component <FormKit />Includes every input type
(24+)Accessibility built-inState tracking for invalid, loading, errors, and
moreExport to restructure input HTMLCreate custom inputsControl input values
with middlewareAutomatic DOM for label, help, messages, and moreSupports
conditional inputsSlots for every DOM element
Inputs docs
1
2
3
4
5
6
7
8
9
10
11

<FormKit
  label="Airlines"
  name="airlines"
  help="Which airline do you prefer to fly on?"
  type="radio"
  :options="airlines"
  option-class="!mb-0"
>
  <template #label="context">
    <img
      :src="`https://cdn.formk.it/example-assets/airlines/${context.option.value}.png`"










Render
HTML




Loading Example...

Try changing type="radio" on line 5 to checkbox.


VALIDATION

Apply rules in a single propIncludes validation messages in 40+ languagesControl
when errors showSupport for async rulesDebounce expensive validation rulesBlock
form submision until validation passesSupport for optional and conditional
rulesAdd custom rules and validation messagesForm & input-level messages
Validation docs
1
2
3
4
5
6
7
8
9
10
11

<FormKit
  type="text"
  label="Username"
  name="username"
  placeholder="FormKitFan9000"
  validation="required|length:5,15|alphanumeric"
  help="By default errors are shown on blur or submit"
  autocomplete="off"
/>
<div class="double">
  <FormKit










Render
HTML




Loading Example...


STYLING

Styling approach agnosticOptional first-party themeSupport for Tailwind and
other utility CSS frameworksAdd classes to any DOM elementOverride any DOM
elementDynamic attributes that track stateBuilt-in icon packUse your own SVG
iconsEasy integration with 3rd-party icon libraries
Styling docs
styling.vue
formkit.theme.js
1
2
3
4
5
6
7
8
9

<div class="flex">
  <FormKit
    label="CSS Framework"
    prefix-icon="<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'><path d='M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z' /></svg>"
    :classes="{
      outer: 'mb-4 mr-2 w-1/2',
      inner: 'flex items-center shadow border border-gray-300 appearance-none rounded py-2 px-3 w-full text-gray-700 leading-tight focus-within:ring-4 focus-within:ring-green-500 focus-within:ring-opacity-50',
      prefixIcon: 'h-5 w-5 mr-2 mb-0.5',
      input: 'appearance-none border-none p-0 focus:outline-none focus:border-transparent focus:ring-0',










1

export function rootClasses() {










Render
HTML




Loading Example...


SCHEMA

JSON-compatible formatRenders any DOM and componentsBoolean logic, comparison,
arithmetic expressionsReference reactive data within schemaSupports list
rendering Renders any named slotConditional renderingShorthand for rendering
FormKit inputsStore schema anywhere
Schema docs
1
2
3
4
5
6
7
8
9
10
11

const data = {
  pricePerUser: 2.99,
  format: Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
    .format,
}
const schema = [
  {
    // 👀  Oooo, arbitrary markup!
    $el: 'h1',
    children: 'Account Settings',
    attrs: {










Render
HTML




Loading Example...

Try changing pricePerUser on line 2 to see the schema-powered form re-render.


ARCHITECTURE

Zero third-party dependenciesTypeScript supportTree-shakableExtend with
pluginsPlugins can be applied at an input, group, or global levelShare code
across inputs with featuresExtend with hooksEvent systemWrite your own
inputsFull SSR supportWrap 3rd-party inputsCLI toolCustomize with FormKit
configActive community & supportInternationalization architectureHierarchical
input structure
Architecture docs
index.vue
formkit.config.js
stepOne.vue
stepTwo.vue
stepThree.vue
1

<FormKit type="multi-step">










1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* In this file, export your final config.
It will automatically be injected into the playground for you.
Imports from other playground files are supported. */

import { genesisIcons } from '@formkit/icons'
import { rootClasses } from './formkit.theme.js'
import { createMultiStepPlugin } from '@formkit/addons'

const multiStepPlugin = createMultiStepPlugin({
  tabStyle: 'progress',
  allowIncomplete: false,
})

export default {
  plugins: [multiStepPlugin],
  icons: {
    ...genesisIcons,
  },
  config: {
    rootClasses,
  },
}










1

<template>










1

<template>










1

<template>










Render
HTML




Loading Example...
FormKit Pro


SUPERCHARGE FORMKIT WITH OPTIONAL PRO INPUTS

Powerful commercial form controls, same great API.

Get More with Pro
   
 * Autocomplete
 * Colorpicker
 * Datepicker
 * Dropdown
 * Mask
 * Rating
 * Repeaterfree
 * Slider
 * Taglist
 * Togglefree
 * Toggle Buttonsfree
 * Transfer List
   


AUTOCOMPLETE

Search and select from a custom options list.

Documentation
Search and select a car brand

BMW
Honda
Checkout my label
You can use the label prop to set the text.
Click me!
You can bind event listeners.
I am a single value checkbox
Single-value checkboxes are side-by-side
I am a multi-value checkbox
Multi-value checkboxes are lists
 * Whoa that is neat
 * What a time saver
 * I like this feature

Select a color

Select your favorite color.
Choose a color
A professional colorpicker that supports Hex, RGBA, and HSLA formats as well as
custom swatches
HEX

FormKit




Other



















Birthday

Enter your birth day
Appointment date
MMMM D, YYYY

Book your SPA appointment.
End of the world

When will the end of the world take place?
Which profession most interests you?
Select your desired profession

If money were no object, which profession would you choose?
Student email address

Please enter your student email address.
Business expenses
 * purchase-order.pdf
 * itemized-list.json

Remove all
Select your business expense documents.
Email

Password

Submit

The group input type has no visual output — it is used to logically structure
your nested input data as an object.

The hidden input type has no visual output.

The list input type has no visual output — it is used to logically structure
your nested input data as an array.

Phone number

Please enter a phone number

The meta input type has no visual output — it is used to add arbitrary data to
your form data without creating new markup in the DOM.

Birth month

What month were you born?
Thermostat

What temperature should the house be?
Password

Enter a new password
Preferred transportation
How do you like to get around?
 * E-Bike
 * E-Scooter
 * Electric car
 * Walking
 * Space tube

Volume

Select your volume level.
Enjoyment of reading

Rate your enjoyment of reading as a leisure activity.
Additional Guests
Add the email addresses of guests you'd like to invite to the celebration.
 * Email
   
   * Move up
   * Remove
     
   * Move down
 * Email
   
   * Move up
   * Remove
     
   * Move down

Add Additional Guests


COMING SOON...

Search

What's your favorite planet?
Select a planetMercuryVenusEarthMarsJupiterSaturnUranusNeptune
Choose your nightly price range
$0$250$500$750$1000$1250$1500$1750$2000
 * $500
   
 * $1200
   

Minimum Price

Maximum Price

Checkout my label
You can use the label prop to set the text.
Click me!
You can bind event listeners.
Blog post tags
Food & Drink
Health & Wellness

Tag your blog posts so we can surface related content to users.
Phone number

Your username

Pick a username people will remember!
Your Essay

I'll know if you didn't read the book!
Time

What time will go home today?
Pick your favorite ice cream flavors
Ice cream flavors5

   
 * Vanilla
 * Chocolate
 * Strawberry
 * Mint Chocolate Chip
 * Cookies and Cream
   

Add all valuesRemove all values
Your favorites0

Always show bookmarks bar
T-shirt Size
 * Small
 * Medium
 * Large
 * X-Large

Favorite website

What is your favorite website?
Vacation

What week will you travel to Fiji?


DOCS

 * Getting Started
 * Essentials
 * Inputs
 * Plugins
 * Guides
 * API Reference
 * Changelog


TOOLS

 * Playground
 * Themes
 * i18n Locale Builder
 * AutoAnimate
 * Tempo


ABOUT

 * About
 * What is FormKit?
 * Privacy Policy
 * Terms of Service


SIGN UP FOR THE LATEST NEWS

Email address




 * 
 * 
 * 
 * 

©2024 FormKit, Inc. All rights reserved.
Theme


FORMKIT NEW FEATURES

Exciting new features are on the way! Enter your email to be notified as we
release them.

Email address