useForm

Full form management hook with validation, error tracking, and submit handling.

import { useForm, required, email } from "@allem-sdk/forms";

Config

Pass an object where each key is a field name. Each field takes:

Property	Type	Description
initialValue	T	Initial value for the field
rules	ValidationRule[]	Array of validation rules

Return value

Property	Type	Description
values	T	Current form values
errors	Partial<Record<keyof T, string>>	Validation errors per field
touched	Partial<Record<keyof T, boolean>>	Which fields have been blurred
isValid	boolean	True when no errors
isSubmitting	boolean	True during async submit
setValue	(field, value) => void	Set a field value
setTouched	(field) => void	Mark field as touched
validate	() => boolean	Validate all fields
handleSubmit	(onSubmit) => handler	Returns form submit handler
reset	() => void	Reset to initial values
getFieldProps	(field) => props	Returns value, onChange, onBlur, name

Usage

const form = useForm({
  name: { initialValue: "", rules: [required()] },
  email: { initialValue: "", rules: [required(), email()] },
  age: { initialValue: 0, rules: [min(18, "Must be 18+")] },
});

const onSubmit = async (values) => {
  await fetch("/api/contact", {
    method: "POST",
    body: JSON.stringify(values),
  });
};

<form onSubmit={form.handleSubmit(onSubmit)}>
  <input {...form.getFieldProps("name")} />
  {form.touched.name && form.errors.name && (
    <span>{form.errors.name}</span>
  )}

  <input {...form.getFieldProps("email")} />
  <input type="number" {...form.getFieldProps("age")} />

  <button type="submit" disabled={form.isSubmitting}>
    Send
  </button>
  <button type="button" onClick={form.reset}>Reset</button>
</form>