ArrayField

The ArrayField helps you to create complex forms with ease. It uses React Hook Forms useFieldArray internally.

Import#

• ArrayField: The wrapper component that composes the default ArrayField functionality.
• ArrayFieldContainer: The container component provides context and state management.
• ArrayFieldRows: Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
• ArrayFieldRowContainer: The row container component providers row context.
• ArrayFieldRowFields: Add the name prefix to the fields and acts as a horizontal form layout by default.
• ArrayFieldAddButton: The default add button.
• ArrayFieldRemoveButton: The default remove button.
• useArrayFieldContext: A hook that returns the ArrayField internal state.
• useArrayFieldRowContext: A hook that returns the ArrayFieldRowContainer state.
• useArrayFieldAddButton: A hook that can be used to create a custom add button.
• useArrayFieldRemoveButton: A hook that can be used to create a custom remove button.

import {
  ArrayField,
  ArrayFieldContainer,
  ArrayFieldRows,
  ArrayFieldRowContainer,
  ArrayFieldRowFields,
  ArrayFieldAddButton,
  ArrayFieldRemoveButton,
  useArrayFieldContext,
  useArrayFieldRowContext,
  useArrayFieldAddButton,
  useArrayFieldRemoveButton,
} from '@saas-ui/react'

Usage#

Auto generated form#

Simple array of string values.

Basic object array#

Field names inside an ArrayField need to be prefixed with array-field-name.$. The $ will be replaced with the index of the array item.

Complex array field#

The array field can be fully composed to fit your specific use case.

Custom buttons#

Use the useArrayFieldContext and useArrayFieldRowContext hooks to interact with the ArrayFieldContainer and create advanced custom components.

The useArrayFieldAddButton and useArrayFieldRemoveButton hooks can be used to create custom buttons.

import { Button } from '@saas-ui/react'
import {
  useArrayFieldContext,
  useArrayFieldAddButton,
  useArrayFieldRemoveButton,
} from '@saas-ui/react'

const SimpleAddButton = () => {
  return <Button {...useArrayFieldAddButton()}>Add record</Button>
}

const CustomAddButton = () => {
  const { append, defaultValue, max, fields } = useArrayFieldContext()

  const isDisabled = !!(max && fields.length >= max)

  return (
    <Button
      onClick={() =>
        append(defaultValue, {
          shouldFocus: true,
          focusName: `arrayField.${fields.length}.id`,
        })
      }
      isDisabled={isDisabled}
    >
      Add record
    </Button>
  )
}

const RemoveButton = () => {
  return (
    <Button variant="ghost" {...useArrayFieldRemoveButton()}>
      Remove
    </Button>
  )
}

Accessing the ArrayField context#

You can access the ArrayField context by using a ref, or using useArrayFieldContext