🍓
Tutim Docs
  • 👋Welcome 🍓
  • Overview
    • 🥇First wizard example
    • 🚀Tutim Tools
    • 🤯Concepts
  • Admin Portal
    • Portal
    • Remote Schema
  • React SDK
    • 😍How to use
    • TutimWizard
    • FormProvider
    • Next & Gatsby
  • API Reference
    • Form Config
    • Field Config
    • Fields & props
      • Object
      • Array (list of objects)
      • Custom
  • Troubleshooting
    • FAQ
    • Guides (coming soon)
    • Alternatives comparison
    • 😄Contact us
Powered by GitBook
On this page
  • Overview
  • Interface
  • Example
  • Example Output (form submission)

Was this helpful?

  1. API Reference
  2. Fields & props

Object

PreviousFields & propsNextArray (list of objects)

Last updated 2 years ago

Was this helpful?

Overview

A nested set of fields for use with InputType.Object fields. This allows you to group related form fields together and treat them as a single field.

In order to use an object field, add children and type: InputType.Object to your FieldConfig.

children: { fields: FieldConfig[] },
type: InputType.Object

Interface

interface FieldConfig {
  key: string;
  type: InputType.Object;
  children: { fields: FieldConfig[] };
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
  • key: A unique identifier for the field.

  • type: The type of input to use for the field, as specified by the InputType enumeration.

  • ``: A nested set of fields for use with InputType.Object fields.

  • label: (optional) The label to display for the field.

  • isDisabled: (optional) A boolean value indicating whether the field should be disabled.

  • isRequired: (optional) A boolean value indicating whether the field is required.

  • defaultValue: (optional) The default value for the field.

Example

Here is an example of how the children property can be used in an FieldConfig object:

const validationForm: FormConfig = {
  fields: [
    {
      key: "value",
      label: "Value",
      type: InputType.Number,
    },
    {
      key: "message",
      label: "Message",
      type: InputType.Text,
    },
  ],
};

export const validationsFormConfig: FormConfig = {
  fields: [
    {
      key: "minLength",
      label: "Min Length Validation",
      type: InputType.Object,
      children: validationForm,
    },
    {
      key: "maxLength",
      label: "Max Length",
      type: InputType.Object,
      children: validationForm,
    },
  ],
};

In this example, the validationForm object represents a group of fields that are used to configure a minimum length validation. This group of fields is then reused for the minLength and maxLength fields, which are both of InputType.Object type.

Example Output (form submission)

{
  minLength: {
    value: 3,
    message: 'Minimum 3 letters',
  },
  maxLength: {
    value: 50,
    message: 'Maximum 50 letters',
  }
}
children