Modular Forms

FieldArray

Headless field array that provides reactive properties and state.

<FieldArray of={…} name={…} validate={…} keepActive={…} keepState={…}>
  children
</FieldArray>

Properties

  • of FormStore
  • name string
  • validate Maybe<MaybeArray<ValidateFieldArray>>
  • validateOn 'touched' | 'input' | 'change' | 'blur' | 'submit' = 'submit'
  • revalidateOn 'touched' | 'input' | 'change' | 'blur' | 'submit' = 'input'
  • keepActive boolean = false
  • keepState boolean = true
  • children (fieldArray: FieldArrayStore) => JSX.Element

Explanation

For validate, we recommend using the validation functions that we provide, as they make the code more readable. If necessary, you can also write your own validation functions.

Field arrays automatically detect if they are still in use and update their status accordingly. If you don't want a field array to become inactive when it is no longer in use, you can set keepActive to true.

By default, the state of an inactive field array is maintained. If you want a field to be reset when it becomes inactive, you can set keepState to false.

Edit page