Example Apps

This folder contains demo apps that exercise features of the formitiva library. The apps are intended to:

• Show common integration points (custom submit handlers, form-level validation)
• Demonstrate theming/custom CSS variable overrides
• Exercise conditional visibility, grouping, and localization
• Act as runnable examples during development (they import the local formitiva source)

Formitiva provides example applications for all supported frameworks:

Framework	Package	Example path
React	@formitiva/react	examples/react/
Vue	@formitiva/vue	examples/vue/
Angular	@formitiva/angular	examples/angular/
Vanilla JS	@formitiva/vanilla	examples/vanilla/

All four example apps cover the same set of pages/features so you can compare implementations side-by-side.

---

Examples Index

• Basic / Quick Start
• Field Groups
• Conditional Fields (Parents)
• Form Validation
• Submit Handler
• Translation / i18n
• Custom Component
• Plugin

---

Demo Pages

Basic / Quick Start

Demonstrates the simplest way to render a form:

• Define a form definition inline
• Pass an onSubmit handler
• Display the submitted values

Field Groups

Shows how to organize form fields into logical groups (e.g., "Personal Information", "Contact Details"). Demonstrates:

• Field grouping for better UX
• Collapsible sections
• Visual organization of complex forms

Conditional Fields (Parents)

Showcases conditional field visibility based on parent field values. Features:

• Parent-child field relationships
• Dynamic show/hide logic
• Cascading dropdowns
• Multi-level conditional rendering

Form Validation

Demonstrates custom validation patterns. Shows how to:

• Register a form-level validation handler with registerFormValidationHandler
• Reference it via validationHandlerName in the definition
• Handle cross-field validation (e.g., lower < upper limit)

Submit Handler

Custom form submission handling. Shows how to:

• Register a submission handler by name with registerSubmissionHandler
• Reference it via submitHandlerName in the definition
• Update component state after submission

Translation / i18n

Multi-language form support with custom translations. Demonstrates:

• Language switching at runtime via the language prop
• Custom locale files at public/locales/{lang}/{localizationName}.json
• Setting localization in the definition to load the correct bundle

Custom Component

Demonstrates registering a custom field type. Shows how to:

• Create a framework-specific input component (React/Vue/Angular/Vanilla)
• Register it with registerComponent(typeName, component)
• Register field-type and custom field validators
• Use the new type in a form definition

Plugin

This example demonstrates how to bundle a custom plugin using FormitivaPlugin. It covers:

• Defining a custom component
• Creating a field-type validator
• Creating a custom field validation handler
• Implementing a form-level validation handler
• Setting up a submission handler
• Registering all of the above with a single registerPlugin() call

---

Install & Run

# From the example folder (e.g. examples/react)
npm install
npm run dev

Build for production

npm run build

---

Registering custom handlers

Form submission handler (register and reference)

1. Define and register a handler with registerSubmissionHandler(name, fn) (at module load or app init).
2. Set submitHandlerName on your definition to the registered name.

Form-level validation handler (cross-field validation)

1. Register with registerFormValidationHandler(name, fn).
2. Set validationHandlerName on your definition.

Example:

registerFormValidationHandler('myFormValidator', (valuesMap, t) => {
  const errors: string[] = [];
  if (Number(valuesMap.a) >= Number(valuesMap.b)) {
    errors.push(t('a must be less than b'));
  }
  return errors.length > 0 ? errors : undefined;
});