• English

      • Group API

      Group is the container component for group forms, used to wrap fields within a group.

      Schema Format

      Supported Schema Formats

      // 1. FieldSchema array - each field is wrapped independently
const schema = [
  { type: 'string', name: 'name', label: 'Name' },
  { type: 'number', name: 'age', label: 'Age' }
];

// 2. GroupSchema array - explicit grouping
const schema = [
  {
    key: 'basic',
    props: { title: 'Basic Info' },
    fields: [
      { type: 'string', name: 'name', label: 'Name' },
      { type: 'string', name: 'email', label: 'Email' }
    ]
  }
];

      Auto-wrapping Mechanism

      When using the FieldSchema[] format (flat field array), the Form component automatically wraps all fields in a single default group:

      // Original schema
const schema = [
  { type:'string', name:'name', label:'Name' },
  { type:'number', name:'age', label:'Age' }
];

// Auto-wrapped as (conceptual):
// [
//   { key: 'group', fields: [{ type:'string', name:'name', label:'Name' }, { type:'number', name:'age', label:'Age' }] }
// ]

// All fields are placed in the same Group with a fixed key of 'group'

      Note: If you need independent group styling for each field, use the GroupSchema[] format to manually define groups.

      Import

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

      Note: The Group component is an internal component and is not exported from @schema-formx/react. If you need a custom group container, register it via components.DefaultGroup or specify it in GroupSchema.component.

      Props

      layout

      Layout configuration, controls the group's styles and arrangement.

      Type: Layout

      Required: Yes

      className

      CSS class name for the group container.

      Type: string

      Required: No

      style

      Inline styles for the group container.

      Type: CSSProperties

      Required: No

      children

      Content within the group, typically form fields.

      Type: ReactNode

      Required: Yes

      GroupSchema Type

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

      Note: GroupSchema does not have a built-in label property. If you need to display a group title, pass it via props (e.g., props: { title: 'Group Title' }) and render it in your custom DefaultGroup component.

      key

      Unique identifier for the group.

      fields

      Array of field configurations within the group.

      component

      Custom group container component.

      props

      Extra props passed to the group container.

      Usage Examples

      Basic Usage

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

const schema: GroupSchema[] = [
  {
    key: 'basic',
    props: { title: 'Basic Info' },
    fields: [
      { type: 'string', name: 'name', label: 'Name', required: true },
      { type: 'string', name: 'email', label: 'Email', required: true }
    ]
  },
  {
    key: 'address',
    props: { title: 'Address' },
    fields: [
      { type: 'string', name: 'province', label: 'Province' },
      { type: 'string', name: 'city', label: 'City' }
    ]
  }
];

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

      Custom Group Container

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

const CustomGroup = ({ title, children, className, style }) => (
  <div className={className} style={style}>
    <h3 style={{ 
      margin: '0 0 16px 0',
      padding: '12px',
      backgroundColor: '#1890ff',
      color: 'white',
      borderRadius: '4px'
    }}>
      {title}
    </h3>
    <div style={{ padding: '16px' }}>
      {children}
    </div>
  </div>
);

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 components = {
  DefaultControl: InputComponent,
  DefaultGroup: CustomGroup
};

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

      Custom Group Container Interface

      A custom group container should receive the following props:

      interface GroupComponentProps {
  title?: string;
  children: ReactNode;
  layout: Layout;
  className?: string;
  style?: CSSProperties;
  [key: string]: unknown;
}