Table of Contents

Form Configuration

Forms in Tina are built upon the Final Form library, and inherit all of Final Form's configuration options.

You can see the all of Final Form's form config options in the Form Config Documentation, but the following options will most commonly be used when creating a form:

initialValuesAn object containing the initial state of the form.
onSubmitA function that runs when the form is saved.

In addition to Final Form's options, Tina's form hooks accept the following additional configuration options:

interface FormOptions<S> {
  id: any
  label: string
  fields: Field[]
  loadInitialValues?: () => Promise<S>
  onSubmit?: () => Promise<any>
  reset?(): void
  onChange?(state): void
  actions?: any[]
  buttons?: {
    save: string
    reset: string
  __type?: string
idA unique identifier for the form. This should be derived from the content to distinguish it from other instances of the form.
labelA label for the form that will appear in the sidebar.
fieldsAn array of fields that will define the shape of the form and how content is edited.
loadInitialValuesOptional: A function to load the initial form state asynchronously. Return a promise that passes an object of form values when it resolves.
onSubmitOptional: An asynchronous function to invoke when the form is saved, i.e. when the 'Save' button is pressed.
resetOptional: A function that runs when the form state is reset by the user via the 'Reset' button.
actionsOptional: An array of custom actions that will be added to the form.
buttonsOptional: An object to customize the 'Save' and 'Reset' button text for the form.
onChangeOptional: A function that runs when the form values are changed.
__typeOptional: Sets the Form's plugin type. Automatically set based on which form hook is used.

Last Edited: November 10, 2021