React Step FormGuides and Concepts
React Step FormGuides and Concepts
Type safety
Typed field paths and inferred values.
React Step Form is designed for strong type safety with minimal annotations.
Inference from schema
FormWizard can infer values from the schema in most scenarios. When you want
explicit typing, use z.infer and create a typed Controller.
import * as z from "zod";
import { Controller } from "@avenra/react-step-form";
const schema = z.object({
account: z.object({
email: z.string().email(),
}),
});
type Values = z.infer<typeof schema>;
const TypedController = Controller<Values>;
<TypedController
name="account.email"
render={({ field }) => (
<input
value={field.value ?? ""}
onChange={(e) => field.onChange(e.target.value)}
/>
)}
/>;Field path safety
name is constrained to FieldPath<TValues>, so nested paths are checked at
compile time.
Controller change handling
field.onChange accepts direct values or event-like payloads, which allows
simple input bindings.
<input {...field} />