---
url: https://formhaus.dev/guide/examples.md
description: >-
  Example Formhaus JSON definitions: basic form, conditional fields, multi-step,
  validation and a branching form with radio auto-advance.
---

# Examples

The JSON files in [`examples/definitions`](https://github.com/ignsm/formhaus/tree/main/examples/definitions) are returned by the MCP server's `example_definitions` tool. All of them except `branching-form.json` are also playground presets. Copy any of them into a project and pass it to `FormRenderer`.

## Basic form

A single-step contact form with text, email, autocomplete and datetime fields and required rules.

```json
{
  "id": "basic-form",
  "title": "Contact Information",
  "submit": { "label": "Submit" },
  "fields": [
    {
      "key": "firstName",
      "type": "text",
      "label": "First Name",
      "placeholder": "Enter your first name",
      "validation": { "required": true, "minLength": 2 }
    },
    {
      "key": "lastName",
      "type": "text",
      "label": "Last Name",
      "placeholder": "Enter your last name",
      "validation": { "required": true }
    },
    {
      "key": "email",
      "type": "email",
      "label": "Email Address",
      "placeholder": "you@example.com",
      "validation": {
        "required": true,
        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
        "patternMessage": "Please enter a valid email address"
      }
    },
    {
      "key": "country",
      "type": "autocomplete",
      "label": "Country",
      "placeholder": "Type to filter…",
      "options": [
        { "value": "US", "label": "United States" },
        { "value": "MX", "label": "Mexico" },
        { "value": "CA", "label": "Canada" },
        { "value": "BR", "label": "Brazil" },
        { "value": "IN", "label": "India" }
      ],
      "validation": { "required": true }
    },
    {
      "key": "meetingTime",
      "type": "datetime",
      "label": "Preferred meeting time",
      "helperText": "We'll confirm by email"
    }
  ]
}

```

## Conditional fields

A payment form where `show` conditions on `paymentMethod` reveal card or crypto wallet fields.

```json
{
  "id": "conditional-fields",
  "title": "Payment Details",
  "submit": { "label": "Continue" },
  "fields": [
    {
      "key": "paymentMethod",
      "type": "select",
      "label": "Payment Method",
      "options": [
        { "value": "bank", "label": "Bank Transfer" },
        { "value": "card", "label": "Credit/Debit Card" },
        { "value": "crypto", "label": "Cryptocurrency" }
      ],
      "validation": { "required": true }
    },
    {
      "key": "cardNumber",
      "type": "text",
      "label": "Card Number",
      "show": [{ "field": "paymentMethod", "eq": "card" }],
      "validation": { "required": true },
      "inputMode": "numeric"
    },
    {
      "key": "cardExpiry",
      "type": "text",
      "label": "Expiry (MM/YY)",
      "placeholder": "MM/YY",
      "show": [{ "field": "paymentMethod", "eq": "card" }],
      "validation": { "required": true }
    },
    {
      "key": "walletAddress",
      "type": "text",
      "label": "Wallet Address",
      "show": [{ "field": "paymentMethod", "eq": "crypto" }],
      "validation": { "required": true }
    },
    {
      "key": "cryptoNetwork",
      "type": "select",
      "label": "Network",
      "show": [{ "field": "paymentMethod", "eq": "crypto" }],
      "options": [
        { "value": "ethereum", "label": "Ethereum" },
        { "value": "tron", "label": "Tron" },
        { "value": "solana", "label": "Solana" }
      ],
      "validation": { "required": true }
    }
  ]
}

```

## Multi-step form

A three-step account setup with progress, defaults, a select, a checkbox, a radio and a switch.

```json
{
  "id": "multi-step",
  "title": "Account Setup",
  "submit": { "label": "Create Account" },
  "steps": [
    {
      "id": "personal",
      "title": "Personal Information",
      "description": "Tell us about yourself",
      "fields": [
        { "key": "firstName", "type": "text", "label": "First Name", "validation": { "required": true } },
        { "key": "lastName", "type": "text", "label": "Last Name", "validation": { "required": true } },
        { "key": "email", "type": "email", "label": "Email", "validation": { "required": true } },
        { "key": "phone", "type": "phone", "label": "Phone Number", "inputMode": "tel" }
      ]
    },
    {
      "id": "address",
      "title": "Address",
      "description": "Where do you live?",
      "fields": [
        { "key": "street", "type": "text", "label": "Street Address", "validation": { "required": true } },
        { "key": "city", "type": "text", "label": "City", "validation": { "required": true } },
        { "key": "state", "type": "text", "label": "State / Province" },
        { "key": "zipCode", "type": "text", "label": "ZIP / Postal Code", "validation": { "required": true } },
        {
          "key": "country",
          "type": "select",
          "label": "Country",
          "options": [
            { "value": "US", "label": "United States" },
            { "value": "MX", "label": "Mexico" },
            { "value": "CA", "label": "Canada" }
          ],
          "validation": { "required": true }
        }
      ]
    },
    {
      "id": "preferences",
      "title": "Preferences",
      "description": "Customize your experience",
      "fields": [
        { "key": "newsletter", "type": "checkbox", "label": "Subscribe to newsletter", "defaultValue": true },
        {
          "key": "notifications",
          "type": "radio",
          "label": "Notification preference",
          "options": [
            { "value": "email", "label": "Email" },
            { "value": "sms", "label": "SMS" },
            { "value": "none", "label": "None" }
          ],
          "defaultValue": "email"
        },
        { "key": "darkMode", "type": "switch", "label": "Dark mode" }
      ]
    }
  ]
}

```

## Validation

A registration form with length, pattern, range and `matchField` rules and custom messages.

```json
{
  "id": "validation-form",
  "title": "Account Registration",
  "submit": { "label": "Create Account" },
  "fields": [
    {
      "key": "username",
      "type": "text",
      "label": "Username",
      "placeholder": "Choose a username",
      "validation": {
        "required": true,
        "minLength": 3,
        "maxLength": 20,
        "pattern": "^[a-zA-Z0-9_]+$",
        "patternMessage": "Only letters, numbers, and underscores"
      }
    },
    {
      "key": "email",
      "type": "email",
      "label": "Email",
      "validation": {
        "required": true,
        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
        "patternMessage": "Please enter a valid email"
      }
    },
    {
      "key": "password",
      "type": "password",
      "label": "Password",
      "helperText": "At least 8 characters",
      "validation": {
        "required": true,
        "minLength": 8,
        "minLengthMessage": "Password must be at least 8 characters"
      }
    },
    {
      "key": "confirmPassword",
      "type": "password",
      "label": "Confirm Password",
      "validation": {
        "required": true,
        "matchField": "password",
        "matchFieldMessage": "Passwords do not match"
      }
    },
    {
      "key": "age",
      "type": "number",
      "label": "Age",
      "validation": {
        "required": true,
        "min": 18,
        "minMessage": "You must be at least 18 years old",
        "max": 120
      }
    }
  ]
}

```

## Branching form

A radio answer with `autoAdvance` picks a business or personal step, and both branches converge at review through `routes`. See the [routing guide](/guide/steps#route-between-branches).

```json
{
  "id": "branching-account",
  "title": "Create an account",
  "submit": { "label": "Create account" },
  "steps": [
    {
      "id": "kind", "title": "Choose an account type", "next": false,
      "fields": [{
        "key": "kind", "type": "radio", "label": "Account type", "autoAdvance": true,
        "helperText": "Click or press Space/Enter to continue. Arrow keys only select. Activate the selected option again to retry.",
        "validation": { "required": true },
        "options": [{ "value": "business", "label": "Business" }, { "value": "personal", "label": "Personal" }]
      }],
      "routes": [
        { "to": "business", "show": [{ "field": "kind", "eq": "business" }] },
        { "to": "personal" }
      ]
    },
    {
      "id": "business", "title": "Company details",
      "fields": [{ "key": "company", "type": "text", "label": "Company", "validation": { "required": true } }],
      "routes": [{ "to": "review" }]
    },
    {
      "id": "personal", "title": "Personal details",
      "fields": [{ "key": "name", "type": "text", "label": "Name", "validation": { "required": true } }],
      "routes": [{ "to": "review" }]
    },
    { "id": "review", "title": "Review and submit", "fields": [] }
  ]
}

```

## Next steps

* [Recipes](/recipes/): complete forms for common jobs with React and Vue code
* [Figma Plugin](/guide/figma): render these definitions as Figma mockups
* [/formhaus:formhaus-create-form](/guide/formhaus-create-form): generate new definitions with Claude
* [Definition Reference](/api/definition): full TypeScript types