SuperAPI AI 工具集

formedible

前端与建站

查看项目

更新于 10-16 05:06

技能介绍

用途:Formedible 用于在 React 中构建和配置表单。它基于 TanStack Form 和 shadcn 兼容 UI 组件,由一份字段配置数组渲染出完全类型化的表单,字段、校验、分页/标签页、持久化和分析都在一个 useFormedible<TValues>(config) 调用中描述,返回的 Form 组件负责渲染。

安装:在拥有 UI 组件的应用中执行 pnpm dlx shadcn@latest add https://formedible.dev/r/formedible-core.json。这会声明 @tanstack/react-form、zod、clsx、lucide-react、tailwind-merge 等依赖并拉取 shadcn 的 badge、button、checkbox、command、field、input、popover、radio-group、select、slider、switch、textarea 组件;开发环境为 React 19。安装完成以 components/ui/formedible/hooks/use-formedible.tsx 存在为准。该注册表项为 formedible-core,包 @formedible/formedible 版本 0.0.0。

主要能力:源码归属——安装会把 hook、字段和类型复制到你的应用 components/ui/formedible/**,从本地 @/components/ui/formedible/... 导入,而非发布包。类型值用 z.infer<typeof schema> 定义,字段名、defaultValues 键与 schema 键需一致。字段类型包括 text、email、password、url、tel、textarea、number、select、radio、checkbox、switch、date、slider、rating、phone、file、array、object、multiSelect、combobox、autocomplete、multiCombobox、color、duration、location、masked,另有别名归一化。校验走 Standard Schema v1,推荐 zod v4;提交逻辑写在 formOptions.onSubmit,配置 conditional、动态文本 token、分页与标签页、持久化与自动保存、分析回调等。hook 返回 Form、form、currentPage、totalPages、visiblePages、goToNextPage、goToPreviousPage、setCurrentPage、isFirstPage、isLastPage、progressValue、saveToStorage、loadFromStorage、clearStorage。

限制与注意:提交后表单默认重置并清除持久化键,可用 resetOnSubmitSuccess: false 保留值;返回的 Form 会拦截原生 submit 并忽略传入的 onSubmit 属性;标签页与分页不要混用;emailConfig 已弃用且运行时被忽略;optionSets 是类型兼容元数据,没有内置渲染器读取;noValidate 默认 true。字段、校验、流程、解析与 AI 相关详细选项需查阅对应参考文献(fields.md、validation.md、flows.md、parser-and-ai.md)。官方文档与收费信息暂未提供。