@vetaui/forms-kit

Full-featured form system for Veta — wraps react-hook-form + zod with Veta-styled components. Includes <ZodForm>, multi-step forms, conditional fields, error summaries, and all react-hook-form primitives.

Install

pnpm add @vetaui/foundations @vetaui/atoms @vetaui/forms-kit zod @hookform/resolvers

Basic usage

import { ZodForm } from "@vetaui/forms-kit";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@vetaui/forms-kit";
import { Input } from "@vetaui/atoms";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Invalid email"),
  password: z.string().min(8, "Min 8 characters"),
});

export default function LoginForm() {
  return (
    <ZodForm schema={schema} onSubmit={(data) => console.log(data)}>
      {({ register, formState: { errors } }) => (
        <>
          <FormField>
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" {...register("email")} />
              </FormControl>
              <FormMessage>{errors.email?.message}</FormMessage>
            </FormItem>
          </FormField>
          <button type="submit">Sign in</button>
        </>
      )}
    </ZodForm>
  );
}

Multi-step forms

import { MultiStepForm } from "@vetaui/forms-kit";

<MultiStepForm
  steps={[
    { label: "Account", schema: accountSchema, children: <AccountStep /> },
    { label: "Profile", schema: profileSchema, children: <ProfileStep /> },
    { label: "Confirm",                        children: <ConfirmStep /> },
  ]}
  onSubmit={handleFinalSubmit}
/>

Exports

| Export | Description | | --- | --- | | Form | Root form provider (react-hook-form FormProvider) | | FormField | RHF-connected field wrapper | | FormItem | Vertical field layout | | FormLabel | Accessible form label | | FormControl | Slot for the input element | | FormDescription | Helper text | | FormMessage | Validation error | | FormErrorSummary | All errors at once | | ZodForm | Shorthand form with Zod schema + RHF | | MultiStepForm | Wizard form with per-step validation | | ConditionalField | Field that renders only when a condition is met | | useForm | Re-exported from react-hook-form | | useFormContext | Re-exported from react-hook-form | | useFieldArray | Re-exported from react-hook-form | | useWatch | Re-exported from react-hook-form |

License

MIT — Dambert Munoz