• Public
  • Public/Protected
  • All



Type aliases


AbstractFormField<T, V>: { description?: Description; initialValue?: V; label?: string; name: string; onChange?: (value: V, name: string) => void; required?: boolean; type: T }

Type parameters

  • T: string

  • V

Type declaration

  • Optional description?: Description

    An optional verbose description which will only be shown when the field is expanded.

  • Optional initialValue?: V
  • Optional label?: string

    A quick description of the field. If omitted, the name will be used as label.

  • name: string

    The name uniquely identifies the input field and is used to store the value in the output structure, i.e. if field.name === 'myFieldName', then the value chosen by the user is available in the output stucture in output['myFieldName']. Note that the section structure is irrelevant for the output structure, just the name uniquely identifies the field.

  • Optional onChange?: (value: V, name: string) => void
      • (value: V, name: string): void
      • Parameters

        • value: V
        • name: string

        Returns void

  • Optional required?: boolean

    If this is set to true, the form cannot be submitted if this fields value is empty or undefined.

  • type: T

    The type uniquely identifies which kind of form field is used, e.g. 'string', 'integer'. This tells the library which form field manager should be used to handle this form field.


Description: string | string[] | JSX.Element | undefined | false

A description for either a field or a section. If undefined or false, it will not be shown. If its a JSX.Element, it will be rendered as description. If its a string, the string will be rendered. If its an array of strings, they will be rendered as distinctive paragraphs.


A form field describes a type of input, i.e. text input, number input etc.

Included are:

  • FormFieldString
  • FormFieldInteger
  • FormFieldFloat
  • FormFieldSelect
  • FormFieldMultiSelect
  • FormFieldBoolean

You can add your own form field by extending AbstractFormField and implementing an associated FormFieldManager<CustomFormField>.


FormFieldBoolean: AbstractFormField<"boolean", boolean> & {}


FormFieldFloat: AbstractFormField<"float", number> & { max?: number; min?: number; placeholder?: string; step?: number }


FormFieldInteger: AbstractFormField<"integer", number> & { max?: number; min?: number; placeholder?: string; step?: number }


FormFieldMultiSelect: AbstractFormField<"multiselect", string[]> & { options: { label?: string; value: string }[] }


FormFieldRendererProps<T>: { customManagers?: FormFieldManager<FormField>[]; editingField?: string; field: T; form: FormStructure; onChange: (value: ValueOfField<T>) => void; onSetEditingField: (field?: string) => void; value?: ValueOfField<T> }

Type parameters

Type declaration


FormFieldSelect: AbstractFormField<"select", string> & { options: { label?: string; value: string }[] }


FormFieldString: AbstractFormField<"string", string> & { mask?: string; placeholder?: string; regex?: RegExp }


SpecificFormFieldRendererProps<T>: FormFieldRendererProps<T> & { error?: string; onCancel: () => void; onClearError: () => void; onError: (error: string) => void; onSave: (newValue?: ValueOfField<T>) => void }

Type parameters


TypeOfField<T>: T extends AbstractFormField<infer V, any> ? V : never

Type parameters


ValueOfField<T>: T extends AbstractFormField<any, infer V> ? V : never

Type parameters


Const Form

Form: React.FC<FormProps> = ...


Const openForm

  • openForm(options: Omit<FormProps, "value">): Promise<{}>

Generated using TypeDoc