Basic Form

A minimal form showing the core concepts: metadata definition, field path generation, and form state via useDynamicForm().

What It Demonstrates

Defining a heading group with child text fields
Automatic field path generation from field names
Validation message rendering
Reading live form values and meta state

Example

IsDirty: false
Touched: false
Valid: true

// form values:
{
  "person": {}
}

Metadata

The form is driven by a small metadata array. Two text fields nested under a heading section:

ts

const metadata: Metadata[] = [
  {
    name: 'person',
    type: 'heading',
    fieldOptions: { label: 'Person' },
    children: [
      { name: 'firstName', type: 'text', fieldOptions: { label: 'First name' } },
      { name: 'lastName', type: 'text', fieldOptions: { label: 'Last name' } },
    ],
  },
];