• English

      • API Reference

      This section provides the complete API reference for Schema FormX React component library.

      Core Components

      Form Component

      Form is the core component of Schema FormX, providing complete form functionality.

      Key Features:

      • Supports field array and group array configuration
      • Controlled and uncontrolled data management
      • Built-in form validation and error handling
      • Custom component mapping

      Basic Usage:

      import { Form } from '@schema-formx/react';

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

function MyForm() {
  return <Form schema={schema} />;
}

      View Form API →

      Group Component

      Group is the container component for group forms, used to wrap fields within a group. Typically rendered automatically by Form.

      View Group API →

      Type Definitions

      FieldSchema

      type FieldSchema = {
  type?: FieldType;
  name: string;
  label: string;
  required?: boolean;
  component?: string;
  props?: Record<string, unknown>;
  hidden?: boolean;
  deps?: string[];
  onDepsChange?: OnDepsChange;
  validator?: Validator;
};

      Field configuration, defines a single form field. See Field API Reference.

      GroupSchema

      type GroupSchema = {
  key: string;
  fields: FieldSchema[];
  component?: string;
  props?: Record<string, unknown>;
};

      Group configuration, defines a group of form fields. See Group API.

      Layout

      type Layout = {
  formClassName?: string;
  formStyle?: CSSProperties;
  groupClassName?: string;
  groupStyle?: CSSProperties;
  fieldClassName?: string;
  fieldStyle?: CSSProperties;
  labelClassName?: string;
  labelStyle?: CSSProperties;
  tipClassName?: string;
  tipStyle?: CSSProperties;
  controlClassName?: string;
  controlStyle?: CSSProperties;
  groups?: Record<string, SetUI<'group'>>;
  fields?: Record<string, SetUI<'field' | 'label' | 'control' | 'tip'>>;
};

      Layout configuration. See Form API - Layout Configuration.

      FormInstance

      type FormInstance = {
  getData: GetData;
  setData: SetData;
  reset: Reset;
  validate: Validate;
  isDirty: IsDirty;
};

      Form instance, provides methods to operate the form. See Form API - Instance Methods.