Examples

Example form definitions showing different features. These same JSON files drive both Vue and React stories.

Dispute Form

A 3-step form with conditional fields (disputed amount only shows for "wrong amount" reason) and a cancel button.

Steps:

1. Transaction details - transaction ID, reason (radio), disputed amount (conditional)
2. Additional details - description (textarea, min 20 chars), contact preference, phone (conditional)
3. Review & Submit - acknowledgement checkbox

Definition: fixtures/dispute-form.json

All fixtures

File	Type	Steps	Key features
basic-form.json	Single step	1	Text + select, basic validation
validation-form.json	Single step	1	All validation rules, matchField
conditional-fields.json	Single step	1	Payment method switches fields
multi-step-form.json	Multi step	3	Linear steps with preferences
conditional-steps.json	Multi step	3	Business step hidden for personal
dispute-form.json	Multi step	3	Dispute with cancel button

Next steps

• Figma Plugin: render these definitions as Figma mockups
• /formhaus-create-form: generate new definitions with Claude
• Definition Reference: full TypeScript types