#Guide Overview

Schema FormX is a schema-driven form solution that supports cross-framework rendering. The same schema can render different UI components, and the same component can use different frameworks.

Schema FormX lets you define form structure as a plain JSON Schema — the framework renders the UI, handles data binding, validation, and inter-field linkage automatically. It is framework-agnostic at the design level: the same schema can drive React, Vue, Svelte, or Solid implementations.

#Workflow

Rendering Flow:

1. Pass Schema configuration to the Form component
2. Form automatically detects the Schema type (field array or group array)
3. Each group renders a Group container
4. Each field looks up the corresponding UI component via the component property
5. Component lookup order: custom component → DefaultControl → error display

#Core Concepts

#Schema

Schema is the core configuration of a form, defining its structure and behavior. There are two forms: FieldSchema (field form) and GroupSchema (group form).

FieldSchema — each element represents a form field:

const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'username',
    label: 'Username',
    required: true
  },
  {
    type: 'string',
    name: 'email',
    label: 'Email',
    required: true
  }
];

GroupSchema — groups multiple fields together with independent component and styling per group:

const schema: GroupSchema[] = [
  {
    key: 'basic',
    props: { title: 'Basic Info' },
    fields: [
      { name: 'username', label: 'Username', type: 'string', required: true },
      { name: 'email', label: 'Email', type: 'string' }
    ]
  },
  {
    key: 'extra',
    props: { title: 'Other Info' },
    fields: [
      { name: 'bio', label: 'Bio', type: 'string' }
    ]
  }
];

#Field

A Field is a single form element, such as an input box, dropdown, or checkbox.

Example:

{
  type: 'string',           // Field type
  name: 'username',         // Field name
  label: 'Username',        // Display label
  required: true,           // Whether required
  component: 'CustomInput', // Custom component
  props: {                  // Component props
    placeholder: 'Please enter username'
  }
}

#Layout

Layout controls the styles and arrangement of the form.

Example:

const layout = {
  formClassName: 'my-form',
  formStyle: { maxWidth: '600px' },
  fieldClassName: 'form-field',
  labelClassName: 'field-label',
  controlClassName: 'field-control'
};

#Component

A Component is the actual UI component that renders form fields.

Example:

const InputComponent = ({ value, onChange, ...props }) => (
  <input
    value={value || ''}
    onChange={(e) => onChange(e.target.value)}
    style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
    {...props}
  />
);

const SelectComponent = ({ value, onChange, options = [], ...props }) => (
  <select
    value={value || ''}
    onChange={(e) => onChange(e.target.value)}
    style={{ width: '100%', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}
    {...props}
  >
    {options.map((opt) => (
      <option key={opt.value} value={opt.value}>{opt.label}</option>
    ))}
  </select>
);

const components = {
  DefaultControl: InputComponent,
  MySelect: SelectComponent
};

#Usage Scenarios

Schema FormX is useful for the following scenarios:

#Complex Form Construction

When a form contains many fields, complex validation rules, and linkage logic, Schema FormX can simplify development.

#Dynamic Form Generation

When the form structure needs to be generated dynamically from backend configuration, Schema FormX's configuration-driven model is very helpful.

#Multi-framework Projects

When a project needs a unified form solution across React, Vue, Svelte, and Solid, Schema FormX can provide a common schema layer.

#Quick Start

Start with the Quick Start chapter to see how to configure a basic form and render it quickly.

#Document Structure

This guide is organized into the following sections:

• Quick Start: Learn the basics of using Schema FormX
• Basic Features: Understand form configuration and field types
• Advanced Features: Explore custom components, validation, grouping, and dependency linkage
• API Reference: Learn the Form, Group, and Field APIs