• English

      • Basic Features

      Framework:

      Overview

      This chapter introduces the basic features of Schema FormX, including form configuration, field types, and other core concepts. After mastering these basics, you can start building simple forms.

      Form Configuration

      Form configuration is the core of Schema FormX, defining the structure and behavior of forms through configuration.

      Basic Configuration

      PropTypeDescription
      schemaFieldSchema[] | GroupSchema[]Form field configuration
      layoutLayoutLayout configuration
      componentsobjectCustom component mapping
      dataobjectControlled data
      defaultDataobjectDefault data
      onChangefunctionData change callback

      Example

      Field Types

      Schema FormX supports the following field types:

      TypeDescriptionDefault Component
      stringText fieldInput
      numberNumber fieldInputNumber
      booleanBoolean fieldCheckbox
      objectObject fieldCustom component
      arrayArray fieldCustom component

      Field Configuration Example

      const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'username',
    label: 'Username',
    required: true,
    props: {
      placeholder: 'Please enter username'
    }
  },
  {
    type: 'number',
    name: 'age',
    label: 'Age',
    props: {
      min: 0,
      max: 120
    }
  },
  {
    type: 'boolean',
    name: 'agree',
    label: 'I agree to the terms'
  }
];

      Layout Configuration

      Layout configuration controls the overall style and arrangement of the form:

      const layout: Layout = {
  formClassName: 'my-form',
  formStyle: { maxWidth: '600px' },
  fieldClassName: 'form-field',
  fieldStyle: { marginBottom: '16px' },
  labelClassName: 'field-label',
  labelStyle: { fontWeight: '500' }
};

      Learn more about form configuration →

      Layout Configuration Options

      OptionTypeDescription
      formClassNamestringForm container class name
      formStyleCSSPropertiesForm container styles
      fieldClassNamestringField container class name
      labelClassNamestringLabel class name
      controlClassNamestringControl container class name
      groupsobjectGroup-specific style configuration
      fieldsobjectField-specific style configuration

      Component Customization

      Schema FormX supports custom form controls:

      Global Registration

      const components = {
  DefaultControl: MyInputComponent,
  CustomSelect: MySelectComponent
};

<Form components={components} schema={schema} />

      Field Specification

      const schema: FieldSchema[] = [
  {
    type: 'string',
    name: 'status',
    label: 'Status',
    component: 'CustomSelect',
    props: {
      options: ['Active', 'Inactive']
    }
  }
];