尝试将第 5 行的 type="radio" 更改为 checkbox。
适用于 Vue 的 开源 表单框架
FormKit通过简化表单结构、生成、验证、主题、提交、错误处理等，使开发人员能够以10倍的速度构建表单。
FormKit KickStart
KickStart your next FormKit form in seconds. Generate from a prompt, image, or text attachment. Copy & paste as Vue components or FormKit schema.
一个小巧、以数据为先的拖放库
FormKit拖放是一个新的开源库，使得处理拖放操作变得轻而易举。它小于~4kb，可在任何JavaScript应用程序中使用。
表单
用于数据流、错误处理和状态管理的强大表单功能。
输入框
由单个组件提供支持的 24+ 个可访问输入。
验证
20+ 个内置的验证规则，支持编写自定义规则。
样式
使用 FormKit 的默认 Genesis CSS 主题、Tailwind 或自定义方法，对每个 DOM 元素都有完全控制权。
模式
使用 FormKit 的 JSON 兼容的动态模式生成表单。完全可序列化以用于数据库存储。
架构
经过优化以处理最复杂的表单。
支持者
-
-
- 您的徽标在这里
新的 — v.1.4.0
介绍 FormKit 主题
FormKit 的开源 MIT 授权的 Tailwind 主题。
表单
使用单个对象填充表单自动收集所有输入值将后端错误应用于表单和输入无需使用
v-model 即可访问任何表单值可选择使用单个对象 v-model 整个表单用于异步提交的自动加载状态跟踪无效、加载、错误等状态轻松禁用表单中的所有输入表单重置将数据结构化为对象、数组和标量值 表单 文档
加载实时示例
输入框
在一个组件中提供完整的结构
<FormKit />包含所有输入类型 (24+)内置可访问性支持跟踪无效、加载、错误等状态导出以重构输入的 HTML创建自定义输入使用中间件控制输入值自动处理标签、帮助信息、消息等 DOM 元素支持条件输入为每个 DOM 元素提供插槽 输入框 文档
加载实时示例
验证
在单个属性中应用规则包含 40+ 种语言的验证消息控制错误显示的时机支持异步规则延迟昂贵的验证规则在验证通过前阻止表单提交支持可选和条件规则添加自定义规则和验证消息表单和输入级别的消息
验证 文档
加载实时示例
样式
样式方法不受限制可选的第一方主题Tailwind 主题支持实用的 CSS 框架可向任意 DOM 元素添加类可覆盖任意 DOM 元素跟踪状态的动态属性内置图标包使用您自己的 SVG 图标与第三方图标库轻松集成
样式 文档
加载实时示例
模式
兼容 JSON 格式渲染任何 DOM 和组件支持布尔逻辑、比较和算术表达式在模式中引用响应式数据支持列表渲染渲染任何命名插槽条件渲染简化渲染 FormKit 输入的方法在任何位置存储模式
模式 文档
加载实时示例
尝试将第 2 行的 pricePerUser 更改，以查看使用模式驱动的表单重新渲染。
架构
无第三方依赖支持 TypeScript可进行按需引入使用插件进行扩展插件可应用于输入、组或全局级别使用
features 跨输入共享代码使用钩子进行扩展事件系统编写自定义输入完全支持服务器端渲染 (SSR)包装第三方输入命令行工具使用 FormKit 配置进行定制活跃的社区和支持国际化架构分层输入结构 架构 文档
加载实时示例
FormKit Pro
使用可选的Pro输入框强化FormKit
强大的商业表单控件，同样出色的API。
通过Pro获得更多
- Autocomplete
- Colorpicker
- Currency
- Datepicker
- Dropdown
- Mask
- Rating
- Repeaterfree
- Slider
- Taglist
- Togglefree
- Toggle Buttonsfree
- Transfer List
- Unit
Autocomplete
搜索并从自定义选项列表中进行选择。
文档