TanStackForm
NEW

用于构建高性能且类型安全表单的 Headless UI 库

适用于 TS/JS、React、Vue、Angular、Solid、Lit 和 Svelte 的 Headless、高性能且类型安全的表单状态管理方案。

开始使用

52,518,504

NPM 下载量

6,296

Github Star 数

190

GitHub 贡献者

4,479

GitHub 依赖者

了解 TanStack Ads 隐藏广告

一流的 TypeScript 支持

TanStack Form 拥有一流的 TypeScript 支持，具有出色的自动补全、卓越的泛型吞吐量，并尽可能在各处推断类型。这能减少运行时错误，提高代码的可维护性，并提供更顺畅的开发体验帮助您充满信心地构建稳健、类型安全且可扩展的表单解决方案。

Headless 且框架无关

Form 的 Headless 和框架无关方案确保了最大的灵活性，以及与许多前端框架（或完全不使用框架）的广泛兼容性。通过提供并鼓励使用 Headless 方案来处理表单，您可以根据应用需求构建自定义的可复用表单组件这几乎不需要抽象，并能让您的代码保持模块化、简单且可组合。

细粒度的响应式性能

在性能方面，TanStack Form 提供了惊人的速度和控制力，且没有冗余、样板代码或抽象。其核心采用细粒度的响应式 API，当表单状态改变时，仅更新相关的组件。最终结果？更快的 UI、满意的用户，且无需担心性能问题。

开发者喜爱

看看团队在说什么

"TanStack Form 是一个新的 Headless 表单库，它让构建复杂的交互式表单变得简单。鉴于 TanStack 套件中所有其他库的高质量，我很期待尝试这个新的表单库。"

This Dot Labs

@ThisDotLabs·This Dot

"它简单的 API 看起来是一个有趣的库，所以我开始研究它。很高兴能帮助 Form 达到 1.0 版本。"

Leonardo Montini

@DevLeonardo·TanStack 维护者

"一流的 TypeScript 支持，具有出色的自动补全、卓越的泛型吞吐量，并尽可能在各处推断类型。"

TanStack Form Docs

官方·TanStack

"TanStack Form 是一个新的 Headless 表单库，它让构建复杂的交互式表单变得简单。鉴于 TanStack 套件中所有其他库的高质量，我很期待尝试这个新的表单库。"

This Dot Labs

@ThisDotLabs·This Dot

"它简单的 API 看起来是一个有趣的库，所以我开始研究它。很高兴能帮助 Form 达到 1.0 版本。"

Leonardo Montini

@DevLeonardo·TanStack 维护者

"一流的 TypeScript 支持，具有出色的自动补全、卓越的泛型吞吐量，并尽可能在各处推断类型。"

TanStack Form Docs

官方·TanStack

只是快速浏览一下...

import { useForm } from '@tanstack/react-form'

const form = useForm({
  defaultValues: { name: '' },
  onSubmit: async ({ value }) => console.log(value),
})
// Bind inputs to form.state and form.handleSubmit

无依赖，全功能。

框架无关设计一流的 TypeScript 支持 Headless 极小体积 / 零依赖细粒度响应式组件/Hook 可扩展性与插件架构模块化架构表单/字段验证异步验证内置异步验证防抖可配置的验证事件深层嵌套对象/数组字段

更少的代码，更少的边界情况。

TanStack Form 不鼓励草率的抽象和以 Hook 为中心的 API，而是在关键处拥抱组合，通过组件为您提供 Headless API（当然，如果您愿意，也可以使用 Hook）。TanStack Form 旨在直接在您的组件和 UI 中使用。这意味着更少的代码、更少的边界情况以及对 UI 更深层次的控制。尝试一下底下的示例吧！