@forgeframework/react-forms

Type-safe form management library for Forge Framework web applications.

Part of the Forge Framework — a TypeScript framework for backend microservices and web applications.

Installation

npm install @forgeframework/react-forms

Usage

import { useForm, schema, v, useFieldArray } from '@forgeframework/react-forms';

interface CreateOrderForm {
  customerName: string;
  email: string;
  items: Array<{ product: string; quantity: number }>;
}

const orderSchema = schema<CreateOrderForm>({
  customerName: v.string().required().min(2),
  email: v.string().required().email(),
  items: v.array().min(1, 'Add at least one item'),
});

function OrderForm() {
  const form = useForm<CreateOrderForm>({
    initialValues: { customerName: '', email: '', items: [] },
    validationSchema: orderSchema,
    onSubmit: async (values) => {
      await api.createOrder(values);
    },
  });

  const items = useFieldArray<{ product: string; quantity: number }>(form, 'items');

  return (
    <form onSubmit={form.handleSubmit}>
      <input {...form.register('customerName')} />
      <input {...form.register('email')} />
      {items.fields.map((item, index) => (
        <div key={item._id}>
          <input {...form.register(`items.${index}.product`)} />
          <input {...form.register(`items.${index}.quantity`)} type="number" />
          <button type="button" onClick={() => items.remove(index)}>Remove</button>
        </div>
      ))}
      <button type="button" onClick={() => items.append({ product: '', quantity: 1 })}>
        Add Item
      </button>
      <button type="submit" disabled={form.isSubmitting}>Submit</button>
    </form>
  );
}

Documentation

Full API reference and guides: https://carbonforge.io/framework/docs/web/react-forms

(Documentation site launching soon.)

License

MIT © Carbon Forge