Introduction
Type-safe forms for Ant Design with schema validation.
What is antd-typed?
antd-typed brings TypeScript-first form handling to Ant Design. It wraps the existing Form API to provide full type inference for field names, values, and validation without changing how you build forms.
The core idea is simple: define your form structure once (with a schema or TypeScript type), and get autocomplete, type checking, and runtime validation everywhere you use it.
import React from "react";
import { } from "antd-typed";
import { } from "zod";
const = .({
: .().(),
: ..().(18),
});
const { , , } = ({
: ,
: () => {
// values is { email: string; age: number }
.();
},
});Why?
Ant Design's Form component works well but has weak TypeScript support. Field names are strings without validation, onFinish receives any, and there is no connection between your data types and form fields.
This leads to common issues:
- Typos in field names that only show up at runtime
- Manual type assertions on form values
- Validation logic duplicated between schema and form rules
- No autocomplete when working with nested or dynamic forms
antd-typed solves these by inferring types from your schema and threading them through every form component.
Design Principles
Minimal API surface. You learn useForm and you know most of the library. The returned components (Form, FormItem, FormList) work exactly like their Ant Design counterparts.
Iterative migration. For simple forms, swap your imports and add a schema. Your existing JSX structure stays the same.
Schema as source of truth. Define validation once in Zod, Valibot, or any Standard Schema library. Types, validation rules, and required field detection all derive from it.
No runtime overhead for types. All type checking happens at compile time. The runtime code is a thin wrapper around Ant Design's Form.
Standard Schema Support
antd-typed implements the Standard Schema specification. Any compatible validation library works out of the box:
Pass your schema to the validator option and antd-typed handles validation on submit, error mapping to fields, and required field detection.