N8x React Form Utils

https://n8x-form-utils.vercel.app/llm.txt

Admin

A configuration-driven React form library that turns JavaScript objects into fully validated, styled...

Tokens:747

Snippets:8

Trust Score:7.8

Update:6 months ago

Show doc for...

Tokens:

Raw

### Create a Contact Form with n8x-form-utils

Source: https://n8x-form-utils.vercel.app

This example demonstrates how to create a complete, production-ready form using n8x-form-utils. It includes automatic rendering, real-time validation, styled inputs, error display, responsive layout, form state management, API submission with loading states, and error handling, all configured via a JavaScript object.

```javascript
import { N8xForm, FormFieldTypes, FormFieldWidth } from '@n8x/react-form-utils';
import { useN8xFormQuery } from '@n8x/react-form-utils';
import { z } from 'zod/v3';

const contactFields = [
  {
    name: 'fullName',
    type: FormFieldTypes.TEXT,
    label: 'Full Name',
    width: FormFieldWidth.FULL,
    validationScheme: z.string().min(2, 'Name is required'),
  },
  {
    name: 'email',
    type: FormFieldTypes.EMAIL,
    label: 'Email',
    width: FormFieldWidth.FULL,
    validationScheme: z.string().email('Valid email required'),
  },
  {
    name: 'message',
    type: FormFieldTypes.TEXTAREA,
    label: 'Message',
    width: FormFieldWidth.FULL,
    validationScheme: z.string().min(10, 'Minimum 10 characters'),
  },
];

export function Contact() {
  const { data, execute, error, isLoading } = useN8xFormQuery(sendMsgApiCall)

  const handleSubmit = async (formData: any) => {
    execute(formData) // Calls the sendMsgApiCall service
  }

  return (
    <N8xForm
      name="contact"
      fields={contactFields}
      onSubmit={handleSubmit}
      isLoading={isLoading}
    />
  );
}

```

Tokens:

Raw