Examples
The JSON files in 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.
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: complete forms for common jobs with React and Vue code
- Figma Plugin: render these definitions as Figma mockups
- /formhaus:formhaus-create-form: generate new definitions with Claude
- Definition Reference: full TypeScript types