Skip to main content

Form

<Form
  draftId={'draft'}
  ref={formRef}
  validators={{businessName: {validate: 'required', errorMessage: 'A business name is required'}}}
  initialValues={{businessName: 'New Club', physicalAddress: showLocationPicker}}
  onChangeValidity={onChangeValidity}
  onChangeDirty={onChangeDirty}
  onChangeForm={onChangeForm}
  validateOnChange
>
  
/>
APIThis is the list of additional props for the component

draftId
string
​

Enables form draft and serves as its unique identifier

initialValues
Values
​

Initial values for the form fields \{fieldId: value\}

onChangeDirty
(isDirty: boolean) => void
​

Callback with form dirtiness (isDirty)

onChangeForm
(data: Values) => void
​

Callback for form data change

onChangeValidity
(isValid: boolean, validations: Validations) => void
​

Callback with validation status (formValid, fieldValidity)

onLoadFromDraft
(data: Values) => void
​

Callback triggered when a previously saved draft is loaded into the form. This occurs only once during the initial mount if a draft with matching draftId exists in storage. Use this to synchronize external state.

validators
{[key: string]: Validator}
​

Validation rules for ui-lib fields \{fieldId: \{validate, errorMessage\}\}