FormKit ⚡️ Vue Forms — Supercharged
source link: https://formkit.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Build Vue 3 forms
10x faster.
A Vue form building framework that simplifies form structure, generation, validation, theming, submission, error handling, and more.
Everything for Vue forms in one package
FormKit is your one-stop solution for high-end Vue forms in your web applications. It includes everything you need — labels, help text, theming support, validation, form generation from JSON, accessibility, internationalization and more!
<FormKit type="form" v-model="data" @submit="handleSubmit">
<FormKit
type="text"
label="Your Name"
name="name"
placeholder="Your name"
validation="required"
/>
<FormKit
type="select"
label="Favorite Food"
name="favorite_food"
placeholder="Choose a food"
:options="['Pizza', 'Ice Cream', 'Burger']"
/>
<FormKit
type="textarea"
name="instructions"
label="Special Instructions"
placeholder="Allergies? No-contact delivery? Let us know."
:help="`${data.instructions.length} / 120`"
validation="length:0,120"
validation-visibility="live"
:validation-messages="{
length: 'Instructions cannot be more than 120 characters.',
}"
/>
</FormKit>
Try changing type="select" on line 10 to
radio or checkbox.
Validation built in
FormKit ships with over 20 built-in validation rules equipping you to smoothly guide users through their content entry. Custom async validation rules are supported out-of-the-box and are easy to author.
Not only that — FormKit ships with support for back-end error handling. Take your server-side error response object and give it to FormKit and you’ll get your error messages back on the inputs they belong to.
<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
type="password"
name="password"
label="Password"
validation="required"
/>
<FormKit
type="password"
name="password_confirm"
label="Confirm password"
validation="required|confirm"
validation-label="Password confirmation"
/>
</div>
<!-- 👀 validation-visibility="dirty" shows errors after typing -->
<FormKit
type="text"
name="phone"
label="Phone Number"
placeholder="xxx-xxx-xxxx"
:validation="[['required'], ['matches', /^\d{3}-\d{3}-\d{4}$/]]"
:validation-messages="{
matches: 'Phone number must be formatted: xxx-xxx-xxxx',
}"
validation-visibility="dirty"
autocomplete="off"
/>
<!-- 👀 validation-visibility="live" shows errors immediately -->
<FormKit
type="text"
label="Twitter Handle"
name="twitter_handle"
placeholder="@username"
validation="required|starts_with:@|length:5"
validation-visibility="live"
autocomplete="off"
/>
Powerful form generation
Even the most complex forms can be represented using FormKit schema. Written from the ground-up, FormKit's schema supports conditional rendering, boolean logic, comparison and arithmetic expressions, dynamic functions, and rendering of HTML and third-party Vue components.
Additionally, all FormKit inputs are built using schema allowing for selective overrides of markup with extremely high specificity.
data: {
pricePerUser: 2.99,
format: Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format
},
schema:
[
{
// 👀 Oooo, arbitrary markup!
$el: 'h1',
children: 'Account Settings'
},
{
$formkit: 'text',
name: 'email',
label: 'Email',
value: '[email protected]',
help: 'This email will be used for account notifications.',
validation: 'required|email'
},
{
$formkit: 'number',
name: 'users',
id: 'users',
min: '1',
max: '100',
value: '3',
label: 'Users',
help: 'How many users do you need on your plan?'
},
{
$el: 'h4',
// 👀 Oooo, dynamic expressions!
children: [
'Cost: ',
'$format($pricePerUser * $get(users).value)',
' / month'
]
},
{
$formkit: 'checkbox',
name: 'eu_company',
id: 'eu',
label: 'Are you located in the European Union?',
},
{
$formkit: 'select',
// 👀 Oooo, conditionals!
if: '$get(eu).value',
name: 'cookie_notice',
label: 'Cookie notice frequency',
options: {
refresh: 'Every page load',
hourly: 'Ever hour',
daily: 'Every day'
},
help: 'How often should we display a cookie notice?'
}
]
Try changing pricePerUser on line 2 to
see the schema-powered form re-render.
Robust theming including Tailwind support
Everyone has their preferred way to apply styles to their Vue forms. Some prefer rolling their own CSS, some adopt opinionated UI frameworks, and others prefer creating custom combinations of utility classes from tools such as Tailwind. FormKit is flexible enough to support them all.
<template>
<FormKit
type="form"
@submit="handleSubmit"
form-class="selection:bg-pink-200 my-8 mx-auto w-full max-w-2xl bg-white border-2 border-green-400 p-6 shadow-lg rounded-lg"
:submit-attrs="{
'input-class': 'bg-green-500 py-2 px-4 mt-4 rounded-md text-white'
}"
>
<div class="flex">
<FormKit
label="CSS Framework"
:classes="{
outer: 'mb-4 mr-2 w-1/2',
input: 'shadow border-gray-300 appearance-none rounded py-2 px-3 w-full text-gray-700 leading-tight focus:outline-none focus:border-transparent focus:ring-4 focus:ring-green-500 focus:ring-opacity-50',
label: 'my-tailwind-label'
}"
value="Tailwind"
/>
<FormKit
label="Form Framework"
:classes="{
outer: 'mb-4 ml-2 w-1/2',
input: 'shadow border-gray-300 appearance-none rounded py-2 px-3 w-full text-gray-700 leading-tight focus:outline-none focus:border-transparent focus:ring-4 focus:ring-green-500 focus:ring-opacity-50',
label: 'my-tailwind-label'
}"
value="FormKit"
/>
</div>
<FormKit
label="What is your favorite Tailwind feature?"
type="textarea"
:classes="{
input: 'shadow border-gray-300 appearance-none rounded py-4 px-5 w-full h-32 text-gray-700 leading-tight focus:outline-none focus:border-transparent focus:ring-4 focus:ring-green-500 focus:ring-opacity-50',
label: 'my-tailwind-label'
}"
value="I like the really long class lists."
/>
</FormKit>
</template>
Open source and free to use
FormKit Core will always be open source and free to use within your projects. You can use FormKit Core — which aims to cover all native HTML input types — without worrying about licensing restrictions or fees.
Go Pro with production-ready synthetic input types
Need more?
Build it with first-class plugin
support
Plugins are first-class citizens in the FormKit ecosystem — in fact many core functions such as Validation, Internationalization, and Theming are authored as first-party plugins using the same APIs available to third-party developers.
But wait, there's more! FormKit ships with a comprehensive feature set — your one-stop shop for Vue form development.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK