🍓
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
  • InputType
  • Option
  • Validation
  • Field
  • Children

Was this helpful?

  1. API Reference

Field Config

PreviousForm ConfigNextFields & props

Last updated 2 years ago

Was this helpful?

Overview

import { FieldConfig } from "@tutim/types";

This is an interface representing the configuration for a single form field.

Form field is also known as a question or an input field.

FieldConfig includes the following properties:

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

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

  • 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.

  • options: (optional) An array of Option objects for use with InputType.Select and InputType.Radio fields.

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

  • : (optional) A nested set of fields for use with InputType.Object fields or InputType.Array.

  • : (optional) A Field Component, use in order to replace the default (global) field set for this type, can only be used with InputType.Custom.

InputType

import { InputType } from "@tutim/types";

This is an enumeration of the various types of inputs that can be used within a form field. The possible values are:

enum InputType {
  Text = "text",
  Select = "select",
  Radio = "radio",
  Switch = "switch",
  Checkbox = "checkbox",
  Number = "number",
  Date = "date",
  Password = "password",
  TextArea = "text-area",
  Json = "json",
  MultiText = "multi-text",
  Object = "object",
  Array = "array",
  Custom = "custom",
}
  • Text: A single line text input.

  • Select: A dropdown menu for selecting a single option from a list.

  • Radio: A group of radio buttons, allowing the user to select a single option from a list.

  • Switch: A toggle switch for selecting a boolean value.

  • Checkbox: A single checkbox for selecting a boolean value.

  • Number: A numerical input.

  • Date: A date input.

  • Password: A password input.

  • TextArea: A multi-line text input.

  • Json: A text input for entering JSON.

  • MultiText: A multi-line text input with the ability to add and remove additional lines.

  • Object: A field containing a nested set of fields.

  • Array: A field containing an array of fields.

  • Custom: A custom field allows you to define your input component.

Option

import { Option } from "@tutim/types";

This is an interface representing a single option within a Select, Radio, or Checkbox field. It includes the following properties:

interface Option {
  value: string | number;
  label: string;
  disabled?: boolean;
}
  • value: The value of the option.

  • label: The label to display for the option.

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

Validation

import { Validation } from "@tutim/types";

This is an interface representing the validation for a form field. It includes the following properties:

interface Validation {
  value?: number | boolean | string;
  message?: string;
}
  • value: (optional) The value to validate against.

  • message: (optional) The error message to display if the field fails validation.

Field

import { Field } from "@tutim/types";

This is an interface representing a custom form field. It includes the following properties:

type Field = (props: FieldProps) => JSX.Element;

Children

import { FieldConfig } from "@tutim/types";
interface Children {
  fields: FieldConfig[];
}
  • fields: An array of fields used as children of the field

props: The properties gets, return any JSX field

This is an interface representing the configuration for object components. it includes an array of fields used as children of the field. Can be used with or . It includes the following properties:

YourCustomField
InputType.Object
InputType.Array
children
Field