Form Variants

Different form layouts and patterns — switch stack and implementation mode (JSON Config or Static JSX), then pick a variant. Each demo uses FormConfig with React Hook Form, TanStack Form, or useActionState. Install per variant, e.g. npx afnoui add forms/forms-contact.

Install with:

npx afnoui add forms/forms-job-application

Job Application

Submitted data

Waiting for a submit…

Submit the form above to see the validated payload rendered here.

Source Code

Required Dependencies & Files

Install packages and copy 25 files to run this form

Dependencies

@hookform/resolvers@tanstack/react-queryaxiosdate-fnsreact-hook-formzod

Dev Dependencies

@types/react@types/react-domtypescript

💡 Using CLI? Shared files are auto-installed

Run npx afnoui form init (or pnpm dlx / yarn dlx / bunx) to scaffold all ● shared files for this stack. You only need to copy ● variant-specific files for your form.

● Variant-specificformConfig.ts, MyFormPage.tsx, formSchema.ts — regenerated per form● Sharedtypes.ts, ReactHookForm.tsx, ReactHookFormField.tsx, … useBackendErrors.ts, field components — install via CLI or copy once

📁forms/formConfig.tsvariant-specific

Your form's JSON configuration — defines structure, fields, validation, and layout.

import { FormConfig } from "../components/forms/types/types";

export const formConfig: FormConfig = {
  "id": "job-application-form",
  "title": "Senior Software Engineer",
  "description": "Join our engineering team and build amazing products",
  "submitLabel": "Submit Application",
  "showReset": false,
  "layout": "single",
  "sections": [
    {
      "id": "personal-info",
      "title": "Personal Information",
      "columns": 2,
      "fields": [
        {
          "type": "text",
          "name": "firstName",
          "label": "First Name",
          "placeholder": "John",
          "required": true
        },
        {
          "type": "text",
          "name": "lastName",
          "label": "Last Name",
          "placeholder": "Doe",
          "required": true
        },
        {
          "type": "email",
          "name": "email",
          "label": "Email",
          "placeholder": "john@example.com",
          "required": true
        },
        {
          "type": "tel",
          "name": "phone",
          "label": "Phone",
          "placeholder": "+1 (555) 000-0000"
        },
        {
          "type": "url",
          "name": "linkedin",
          "label": "LinkedIn Profile",
          "placeholder": "https://linkedin.com/in/johndoe"
        },
        {
          "type": "select",
          "name": "experience",
          "label": "Years of Experience",
          "options": [
            {
              "label": "0-2 years",
              "value": "0-2"
            },
            {
              "label": "3-5 years",
              "value": "3-5"
            },
            {
              "label": "5-8 years",
              "value": "5-8"
            },
            {
              "label": "8+ years",
              "value": "8+"
            }
          ]
        }
      ]
    },
    {
      "id": "application-details",
      "title": "Application Details",
      "columns": 1,
      "fields": [
        {
          "type": "file",
          "name": "resume",
          "label": "Resume/CV",
          "accept": ".pdf,.doc,.docx",
          "required": true
        },
        {
          "type": "textarea",
          "name": "coverLetter",
          "label": "Why do you want to join us?",
          "placeholder": "Tell us about yourself...",
          "rows": 4
        }
      ]
    }
  ]
};