@labmgm/forms

React Hook Form + Zod wrappers for the MGM Laboratory Design System. Composes our presentational primitives (Label, Input, FormHelperText, FormErrorText) with RHF's Controller so every field gets htmlFor, aria-describedby, and aria-invalid wired automatically.

Install

pnpm add @labmgm/forms @labmgm/react react react-hook-form zod @hookform/resolvers

Use

import { z } from "zod";
import { Input, Button } from "@labmgm/react";
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  useZodForm,
} from "@labmgm/forms";

const schema = z.object({
  email: z.string().email("Enter a valid email."),
  password: z.string().min(8, "8+ characters."),
});

function SignIn() {
  const form = useZodForm(schema, { defaultValues: { email: "", password: "" } });
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit((v) => console.log(v))} className="grid gap-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Work email</FormLabel>
              <FormControl>
                <Input type="email" placeholder="[email protected]" {...field} />
              </FormControl>
              <FormDescription>We&apos;ll never share this.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Continue</Button>
      </form>
    </Form>
  );
}

API

| Export | Description | | --------------------- | ---------------------------------------------------------------------------------------- | | Form | Re-export of RHF's FormProvider. | | FormField | Wraps RHF's Controller; supplies the field-context for the rest of the row. | | FormItem | The row container — generates the id used by label / control / message. | | FormLabel | Brand-spec <Label> with htmlFor wired automatically. | | FormControl | Slot-style wrapper that injects id / aria-describedby / aria-invalid into the child. | | FormDescription | FormHelperText with the right id. | | FormMessage | FormErrorText that renders only when the field has an error. | | useZodForm(schema) | Type-safe useForm with a Zod resolver pre-applied. | | useFormField() | Escape hatch for custom controls that need access to the field state. | | useForm, useFormContext, Controller, useFieldArray, useWatch, FormProvider, SubmitHandler, FieldValues, FieldPath | Re-exports of the headline RHF surface. |

License

MIT © MGM Laboratory.