The payoff Forms read like composition, not wiring. ```tsx ```lit html` `; ``` Each component receives a resolved FieldApi, not a path or form context. Define the UI and behavior once, then mount it anywhere its value type fits. Kin Form keeps that component independently subscribed, so a change only updates the part of the form that depends on it.

Build reusable field components →

Why it exists Reusable field components become awkward when a library treats the form as the only stateful object and fields as proxies into it. Nested objects, arrays, and shared validation then need their own special mechanisms. Kin Form treats a form as a tree where every node (leaf, group, or the form itself) is the same thing, with its own state, configuration, and subscribers. That is why one component pattern works at every level. Nothing forces one shape on a given value. Same \{ email, address: \{ line1, line2 \} \}, three valid trees:

Leaf. Any path in the value shape can be treated as a single leaf field. Here, address is.

Flat. Every scalar is its own field, addressed by its full path.

Grouped. address becomes an intermediate node, with line1/line2 registered underneath it.

What it does differently A nested group and a leaf field are the same class, not a special case bolted onto it. field("items.0.code") type-checks against your value type, so a typo'd path is a compile error. Push, insert, move, swap, and remove live on the same class every field already has, not a separate useFieldArray hook. List dependents on a field to re-validate siblings, instead of wiring a manual subscription. A change propagates only to the nodes it affects, so each subscriber re-renders only when the field, or selected state, it's watching actually changed. Your reusable TextField, AddressField, and SubmitButton each take a FieldApi, so they work the same way whether bound to a leaf, a subtree, or the whole form.

Is Kin Form a fit?

Use it when forms become reusable UI

You maintain field components across forms or apps
Your forms have nested groups, dynamic arrays, or multiple steps
You need stable array item identity and narrowly scoped re-renders
You want typed field paths without a separate array API
You need sync or async validation, scoped per field or subtree
Field state must survive UI unmounts and remounts, such as rows in a virtual list

Skip it when the simple thing is enough

The form is a small, one-off contact or login form
Component-local state is already simpler
Your team has a form-library standard that is working well and no pain worth migrating for

How it compares

Full comparison, including where Kin Form isn't the right fit: see the details →

See it for yourself A login form ```tsx {5,14,29} import { useForm, Watch } from "@kintools/form-react"; import { required } from "@kintools/form-validators"; function LoginForm() { const form = useForm({ initialValue: { email: "" }, onSubmit: (form) => login(form.value), }); return ( ); } ``` ```lit {8,20,31-32, 40} import { html, LitElement } from "lit"; import { customElement } from "lit/decorators.js"; import { FormApi, watch } from "@kintools/form-lit"; import { required } from "@kintools/form-validators"; @customElement("login-form") class LoginForm extends LitElement { #form = new FormApi({ initialValue: { email: "" }, onSubmit: (form) => login(form.value), }); override render() { return html` `; } } ```
Reusable TextField ```tsx {5,14} import type { ReactNode } from "react"; import { type FieldApi, useWatch } from "@kintools/form-react"; export type TextFieldProps = { api: FieldApi; label: string; type?: string; }; export function TextField( { api, label, type = "text" }: TextFieldProps, ): ReactNode { // Re-renders when the api's state changes. const field = useWatch(api); return ( {label} field.handleChange(e.target.value)} /> {field.touched && field.invalid && ( // Per-node validation and schema validation can co-exist. {field.error ?? field.schemaError} )} ); } ``` ```lit {8,14} import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators.js"; import { type FieldApi, WatchController } from "@kintools/form-lit"; @customElement("text-field") export class TextField extends LitElement { @property({ attribute: false }) accessor api!: FieldApi; @property() accessor label = ""; // Re-renders when the api's state changes. #watch = new WatchController(this, () => this.api); override render() { const field = this.#watch.value; return html` ${this.label} field.handleChange((e.target as HTMLInputElement).value)} > ${field.touched && field.invalid // Per-node validation and schema validation can co-exist. ? html`${field.error ?? field.schemaError}` : ""} `; } } ```
Reusable SubmitButton ```tsx {5,13} import type { ReactNode } from "react"; import { type FormApi, useWatch } from "@kintools/form-react"; export type SubmitButtonProps = { api: FormApi; // Subclass of FieldApi. children: ReactNode; }; export function SubmitButton( { api, children }: SubmitButtonProps, ): ReactNode { // Re-render only when submitting flips. const submitting = useWatch(api, (f) => f.submitting); return ( ); } ``` ```lit {8,11} import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators.js"; import { type FormApi, WatchController } from "@kintools/form-lit"; @customElement("submit-button") export class SubmitButton extends LitElement { @property({ attribute: false }) accessor api!: FormApi; // Subclass of FieldApi. // Re-render only when submitting flips. #watch = new WatchController(this, () => this.api, (f) => f.submitting); override render() { const submitting = this.#watch.value; return html` `; } } ```
Form with reusable components ```tsx {14-17,19} import { useForm } from "@kintools/form-react"; import { required } from "@kintools/form-validators"; import { TextField } from "./TextField.tsx"; import { SubmitButton } from "./SubmitButton.tsx"; function LoginForm() { const form = useForm({ initialValue: { email: "" }, onSubmit: (form) => login(form.value), }); return ( ```lit {18-23,25} import { html, LitElement } from "lit"; import { customElement } from "lit/decorators.js"; import { FormApi } from "@kintools/form-lit"; import { required } from "@kintools/form-validators"; import "./text-field.ts"; import "./submit-button.ts"; @customElement("login-form") class LoginForm extends LitElement { #form = new FormApi({ initialValue: { email: "" }, onSubmit: (form) => login(form.value), }); override render() { return html` `; } } ```