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.
Source
@saas-ui/forms
- 2.11.2 (latest)
Import
Form
: The wrapper component that manages context and state.
import { Form } from '@saas-ui/react' // default formimport { Form } from '@saas-ui/forms/zod' // zod formimport { Form } from '@saas-ui/forms/yup' // yup form
Usage
When you supply a schema to Form
and don't supply any children, the form will automatically render the fields.
The default Form component supports the following schema format.
Object schema
The object schema is an object with field props. Array and object fields can have nested fields.
import { Form, ObjectSchema } from '@saas-ui/react'const schema = {title: {label: 'Title',rules: {required: true,},},body: {label: 'Body',type: 'textarea',},} as const satisfies ObjectSchemaexport default function Task() {return (<Formschema={schema}defaultValues={{title: '',body: '',}}onSubmit={(params) => alert(params)}/>)}
Customize submit button
import { Form, ObjectSchema } from '@saas-ui/react'const schema = {title: {label: 'Title',rules: {required: true,},},body: {label: 'Body',type: 'textarea',},} as const satisfies ObjectSchemaexport default function Post() {return (<Formschema={schema}defaultValues={{title: '',body: '',}}onSubmit={(params) => alert(params)}fields={{submit: {children: 'Save post',variant: 'outline',colorScheme: 'cyan',},}}/>)}
Object field
import { Form, ObjectSchema } from '@saas-ui/react'const schema = {title: {label: 'Title',rules: {required: true,},},body: {label: 'Body',type: 'textarea',},author: {type: 'object',label: 'Author',properties: {name: {label: 'Name',},email: {label: 'Email',},},},} as const satisfies ObjectSchemaexport default function Post() {return (<Formschema={schema}defaultValues={{title: '',body: '','author.name': 'Eelco','author.email': 'eelco@saas-ui.dev',}}onSubmit={(params) => alert(params)}fields={{author: {type: 'object',columns: 2,},submit: {children: 'Save post',},}}/>)}
Array field
import { Form, ObjectSchema } from '@saas-ui/react'const schema = {title: {label: 'Title',rules: {required: true,},},body: {label: 'Body',type: 'textarea',},tags: {type: 'array',label: 'Tags',items: {type: 'object',properties: {tag: {label: 'Tag',},},},},} as const satisfies ObjectSchemaexport default function Post() {return (<Formschema={schema}defaultValues={{title: '',body: '',tags: [{ tag: 'react' }, { tag: 'typescript' }],}}onSubmit={(params) => alert(params)}fields={{submit: {children: 'Save post',},}}/>)}
Zod schema
The describe
function can to supply a label to the field. Zod currently does not support adding meta data to the schema,
use the fields
prop to override properties on any of the fields.
import { Form } from '@saas-ui/forms/zod'import * as z from 'zod'const schema = z.object({title: z.string().min(1).describe('Title'),description: z.string(),})export default function Post() {return (<Formschema={schema}defaultValues={{title: '',description: '',}}onSubmit={() => null}fields={{description: {label: 'Description',type: 'textarea',},submit: {children: 'Save post',},}}/>)}
Yup schema
The label
function can to supply a label to the field. Using the meta
function you can configure the type of fields.
import { Form } from '@saas-ui/forms/yup'import * as yup from 'yup'const schema = yup.object().shape({title: yup.string().required().label('Title'),description: yup.string().label('Description').meta({ type: 'textarea' }),})export default function Post() {return (<Formschema={schema}defaultValues={{title: '',description: '',}}onSubmit={() => null}fields={{submit: {children: 'Save post',},}}/>)}
Was this helpful?