AutoForm

Automatically render forms based on a schema.

The Form component is an abstraction around React Hook Form and follows the WAI specifications for forms.

AutoForm can be used to quickly generate forms for prototyping or forms that don't require any customization.

Import#

  • AutoForm: The wrapper component that manages context and state.
import { AutoForm, Fields } from '@saas-ui/react'

Usage#

Generate forms based on a schema, currently only acceps a basic object schema, Yup and Zod schemas.

Object schema#

The object schema is a simple object with field props. This is an Object representation of the props on the component.

function Task() {
  const schema = {
    title: {
      label: 'Title',
      rules: {
        required: true,
      },
    },
    assignee: {
      type: 'select',
      label: 'Assignee',
      multiple: true,
      options: [
        { label: 'George', value: '63647b0b-9beb-41b1-9945-e465727f8e2d' },
        { label: 'Haley', value: 'e124505a-1f94-4142-b03f-16bfdffa0371' },
      ],
      rules: {
        required: 'An assignee is required',
      },
    },
    todos: {
      type: 'array',
      min: 1,
      items: {
        type: 'object',
        properties: {
          todo: {
            label: 'Todo',
          },
        },
      },
    },
    author: {
      type: 'object',
      label: 'Author',
      properties: {
        name: {
          label: 'Name',
        },
      },
    },
  }


  return (
    <AutoForm
      defaultValues={{
        title: '',
        todos: [{ todo: '' }],
        assignees: ['63647b0b-9beb-41b1-9945-e465727f8e2d'],
        author: {
          name: 'Elliot',
        },
      }}
      onSubmit={() => null}
      submitLabel="Save task"
      schema={schema}
    />
  )
}

Yup schema#

import { yupForm } from '@saas-ui/forms/yup'
function Post() {
  const schema = Yup.object().shape({
    title: Yup.string().required().label('Title'),
    description: Yup.string().label('Description').meta({ type: 'textarea' }),
  })


  return (
    <AutoForm
      defaultValues={{
        title: '',
        description: '',
      }}
      onSubmit={() => null}
      submitLabel="Save post"
      {...yupForm(schema)}
    />
  )
}

Zod schema#

Zod currently does not support adding meta data to the schema, to work around this you can use the zodMeta function to add JSON meta data in the field description.

import { zodForm, zodMeta } from '@saas-ui/forms/zod'
function Post() {
  const schema = z.object({
    title: z.string().min(1).describe('Title'),
    description: z
      .string()
      .describe(zodMeta({ label: 'description', type: 'textarea' })),
  })


  return (
    <AutoForm
      defaultValues={{
        title: '',
        description: '',
      }}
      onSubmit={() => null}
      submitProps="Save post"
      {...zodForm(schema)}
    />
  )
}

Custom submit button#

function Post() {
  const schema = Yup.object().shape({
    title: Yup.string().required().label('Title'),
    description: Yup.string().label('Description').meta({ type: 'textarea' }),
  })


  return (
    <AutoForm
      defaultValues={{
        title: '',
        description: '',
      }}
      onSubmit={(params) => alert(params)}
      submitLabel={null}
      {...yupForm(schema)}
    >
      <SubmitButton colorScheme="secondary">Save</SubmitButton>
    </AutoForm>
  )
}

Props#

onSubmitrequired

Description

The submit handler.

Type
SubmitHandler<TFieldValues>

schemarequired

Description

The schema. Supports object schema, Zod, Yup or Ajv (JSON Schema). @see https://www.saas-ui.dev/docs/forms/auto-form

Type
any

context

Type
any

criteriaMode

Type
CriteriaMode

defaultValues

Type
{ [x: string]: any; }

delayError

Type
number

fieldResolver

Description

The field resolver.

Type
any

formRef

Description

Ref on the HTMLFormElement.

Type
RefObject<HTMLFormElement>

mode

Type
keyof ValidationMode

onChange

Description

Triggers when any of the field change.

Type
WatchObserver<TFieldValues>

onError

Description

Triggers when there are validation errors.

Type
SubmitErrorHandler<TFieldValues>

ref

Type
ForwardedRef<UseFormReturn<TFieldValues, any>>

resolver

Type
Resolver<TFieldValues, any>

reValidateMode

Type
"onBlur" | "onChange" | "onSubmit"

shouldFocusError

Type
boolean

shouldUnregister

Type
boolean

shouldUseNativeValidation

Type
boolean

submitLabel

Description

The submit button label. Pass null to render no submit button.

Type
ReactNode

Was this helpful?