Field Config

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.

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

• Field: (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;

• props: The properties YourCustomField gets, return any JSX field

Children

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

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 InputType.Object or InputType.Array. It includes the following properties:

interface Children {
  fields: FieldConfig[];
}

• fields: An array of fields used as children of the field