Comment on page
Field Config
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 theInputType
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 ofOption
objects for use withInputType.Select
andInputType.Radio
fields.defaultValue
: (optional) The default value for the field.-
children
: (optional) A nested set of fields for use withInputType.Object
fields orInputType.Array
. -
Field
: (optional) A Field Component, use in order to replace the default (global) field set for thistype
, can only be used withInputType.Custom.
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.
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.
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.
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;
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
Last modified 10mo ago