The submit handler.
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 (<AutoFormdefaultValues={{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 (<AutoFormdefaultValues={{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 (<AutoFormdefaultValues={{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 (<AutoFormdefaultValues={{title: '',description: '',}}onSubmit={(params) => alert(params)}submitLabel={null}{...yupForm(schema)}><SubmitButton colorScheme="secondary">Save</SubmitButton></AutoForm>)}
Props#
onSubmit
required
onSubmit
required
SubmitHandler<TFieldValues>
schema
required
schema
required
The schema. Supports object schema, Zod, Yup or Ajv (JSON Schema). @see https://www.saas-ui.dev/docs/forms/auto-form
any
context
context
any
criteriaMode
criteriaMode
CriteriaMode
defaultValues
defaultValues
{ [x: string]: any; }
delayError
delayError
number
fieldResolver
fieldResolver
The field resolver.
any
formRef
formRef
Ref on the HTMLFormElement.
RefObject<HTMLFormElement>
mode
mode
keyof ValidationMode
onChange
onChange
Triggers when any of the field change.
WatchObserver<TFieldValues>
onError
onError
Triggers when there are validation errors.
SubmitErrorHandler<TFieldValues>
ref
ref
ForwardedRef<UseFormReturn<TFieldValues, any>>
resolver
resolver
Resolver<TFieldValues, any>
reValidateMode
reValidateMode
"onBlur" | "onChange" | "onSubmit"
shouldFocusError
shouldFocusError
boolean
shouldUnregister
shouldUnregister
boolean
shouldUseNativeValidation
shouldUseNativeValidation
boolean
submitLabel
submitLabel
The submit button label.
Pass null
to render no submit button.
ReactNode
Was this helpful?