Docs

Learn

v.Latest
Documentation
Forms
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:

key

description

initialValues

An object containing the initial state of the form.

onSubmit

A 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
}

key

description

id

A unique identifier for the form. This should be derived from the content to distinguish it from other instances of the form.

label

A label for the form that will appear in the sidebar.

fields

An array of fields that will define the shape of the form and how content is edited.

loadInitialValues

Optional: A function to load the initial form state asynchronously. Return a promise that passes an object of form values when it resolves.

onSubmit

Optional: An asynchronous function to invoke when the form is saved, i.e. when the 'Save' button is pressed.

reset

Optional: A function that runs when the form state is reset by the user via the 'Reset' button.

actions

Optional: An array of custom actions that will be added to the form.

buttons

Optional: An object to customize the 'Save' and 'Reset' button text for the form.

onChange

Optional: A function that runs when the form values are changed.

__type

Optional: Sets the Form's plugin type. Automatically set based on which form hook is used.

Last Edited: November 10, 2021