Schema Definition

Each form field is defined using the ISchemaItem interface. The schema is an array of field definitions that tells the form system how to render and validate each input.

Interface Definition

interface ISchemaItem {
  name: string; // Field name (used as key in formValues)
  type: string; // Input type (text, number, select, radio, etc.)
  rules?: (string | object)[]; // Validation rules
  schema?: ISchemaItem[]; // Nested schema for complex fields
  disabled?: boolean; // Whether field is disabled
  layout?: string; // Layout type (default, horizontal)
  options?: IOption[]; // Options for select/radio inputs
  placeholder?: string; // Placeholder text
  label?: string; // Field label
}

Field Properties

Required Properties

• name (string): Unique identifier for the field, used as key in formValues
• type (string): Type of input component to render

Optional Properties

• rules (array): Validation rules for the field
• schema (array): Nested schema for container fields
• disabled (boolean): Whether the field is disabled
• layout (string): Layout type (default, horizontal)
• options (array): Options for select/radio inputs
• placeholder (string): Placeholder text for input fields
• label (string): Display label for the field

Schema Examples

Text Field

{
  name: 'username',
  type: 'text',
  label: 'Username',
  placeholder: 'Enter username',
  rules: ['required']
}

Email Field

{
  name: 'email',
  type: 'text',
  label: 'Email Address',
  placeholder: 'Enter your email',
  rules: ['required', 'email']
}

Select Field with Options

{
  name: 'country',
  type: 'select',
  label: 'Country',
  options: [
    { id: 1, text: 'Ukraine' },
    { id: 2, text: 'USA' },
    { id: 3, text: 'Canada' }
  ],
  rules: ['required']
}

Radio Button Group

{
  name: 'gender',
  type: 'radio',
  label: 'Gender',
  options: [
    { id: 'male', text: 'Male' },
    { id: 'female', text: 'Female' }
  ],
  rules: ['required']
}

Complex Schema Examples

Container with Nested Fields

{
  name: 'address',
  type: 'container',
  label: 'Address Information',
  schema: [
    {
      name: 'street',
      type: 'text',
      label: 'Street Address',
      rules: ['required']
    },
    {
      name: 'city',
      type: 'text',
      label: 'City',
      rules: ['required']
    },
    {
      name: 'postalCode',
      type: 'text',
      label: 'Postal Code',
      rules: ['required']
    }
  ]
}

Form with Multiple Sections

const schema = [
  {
    name: 'personal',
    type: 'container',
    label: 'Personal Information',
    schema: [
      {
        name: 'firstName',
        type: 'text',
        label: 'First Name',
        rules: ['required'],
      },
      {
        name: 'lastName',
        type: 'text',
        label: 'Last Name',
        rules: ['required'],
      },
      {
        name: 'age',
        type: 'number',
        label: 'Age',
        rules: [
          {
            type: 'custom',
            function: '(value) => value >= 18',
            message: 'Must be 18 or older',
          },
        ],
      },
    ],
  },
  {
    name: 'contact',
    type: 'container',
    label: 'Contact Information',
    schema: [
      {
        name: 'email',
        type: 'text',
        label: 'Email',
        rules: ['required', 'email'],
      },
      {
        name: 'phone',
        type: 'text',
        label: 'Phone',
        rules: [
          {
            type: 'regexp',
            pattern: /^\+?[\d\s\-\(\)]+$/,
            message: 'Invalid phone number format',
          },
        ],
      },
    ],
  },
];

Schema Best Practices

1. Use descriptive names that match your data model
2. Group related fields using container types
3. Provide clear labels and placeholders
4. Set appropriate validation rules for each field
5. Use consistent naming conventions across your schema
6. Keep schemas modular for reusability