element-plus-formkit
element-plus-formkit is a data-driven form framework based on Vue3 and ElementPlus. It simplifies complex form validation and development with high performance.
Simple and Easy to Use
Describe an entire form with a single config array, and develop complex forms with their validation rules quickly.
Data-Driven
Built on ElementPlus form components, form data is processed through data flow, with conditional visibility (visible) and field linkage support.
High Performance
element-plus-formkit fully complies with the Vue3 async component loading scheme for every component, with Suspense skeleton loading and smaller bundle size.
Rich Built-in Components
Ships 20+ common form components out of the box (select, remoteSearchSelect, address, cascader, datePicker, upload, treeSelect, mention, etc.).
Remote Data Loading
Fetch options asynchronously for select, radio, checkbox and more via requester / handler, with error fallback and error event callbacks.
Flexible Layout
Supports multi-column layouts via columns, span / col grid config, gap settings, and labelWidth 'auto' for automatic label width measurement.
Extensible
Register custom form components with registerModule, enjoying the same data flow and validation capabilities as built-in modules.
Full Form Capabilities
Inherits the ElementPlus form system, exposing validate, clearValidate, resetFields, validateField, scrollToField and more, with TypeScript support.
Quick Start
pnpm add element-plus-formkit
<template>
<FormKit v-model="form" :config="config" :columns="2" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import FormKit from 'element-plus-formkit'
const form = ref({ name: '', gender: '', birthday: '' })
const config = [
{ type: 'input', key: 'name', label: 'Name', rules: [{ required: true, message: 'Name is required' }] },
{ type: 'radio', key: 'gender', label: 'Gender', options: [{ label: 'Male', value: 1 }, { label: 'Female', value: 2 }] },
{ type: 'datePicker', key: 'birthday', label: 'Birthday' }
]
</script>
Render a complete form with validation and layout from a single config array. Read the docs →
Who's Using
The following companies and organizations are using element-plus-formkit in production (in no particular order):
If your company is also using element-plus-formkit, feel free to open an Issue or PR to add your logo here.