The field name
ObjectField
Form field component to handle object type values.
The ObjectField
is mainly used by AutoForm
to support complex data structures,
but can be used to structure your custom forms as well.
Import#
ObjectField
: The object field component.
import { ObjectField } from '@saas-ui/react'
Usage#
Usage with AutoForm
#
Basic schema with AutoForm
function CreatePost() {const schema = Yup.object().shape({title: Yup.string().required().label('Title'),author: Yup.object().shape({name: Yup.string().required().label('Name'),}).label('Author').meta({ hideLabel: true }),})return (<AutoFormdefaultValues={{title: '',author: {name: '',},}}onSubmit={() => null}{...yupForm(schema)}/>)}
Usage with Form
#
The ObjectField
component will automatically prefix all sub fields and supports nesting.
Eg: author.name
or author.location.address
.
Please note that auto prefixing only works if the fields are a direct child of ObjectField.
function CreatePost() {const schema = Yup.object().shape({title: Yup.string().required().label('Title'),author: Yup.object().shape({name: Yup.string().required().label('Author name'),email: Yup.string().required().email().label('Email address'),}),})return (<FormdefaultValues={{title: '',author: {name: '',email: '',},}}resolver={yupResolver(schema)}onSubmit={() => null}><FormLayout><Field name="title" label="Title" /><ObjectField name="author" label="Author"><Field name="name" label="Name" /><Field name="email" label="Email" /></ObjectField><SubmitButton>Create post</SubmitButton></FormLayout></Form>)}
Props#
name
required
name
required
Description
Type
string
columns
columns
Type
ResponsiveValue<number>
help
help
Description
Field help text
Type
string
hideLabel
hideLabel
Description
Hide the field label
Type
boolean
label
label
Description
The field label
Type
string
placeholder
placeholder
Description
The input placeholder
Type
string
rules
rules
Description
React hook form rules
Type
Omit<Partial<{ required: string | ValidationRule<boolean>; min: ValidationRule<string | number>; max: ValidationRule<string | number>; ... 12 more ...; deps: string | string[]; }>, "disabled" | ... 2 more ... | "setValueAs">
spacing
spacing
Type
ResponsiveValue<string | number>
type
type
Description
Build-in types: - text - number - password - textarea - select - native-select - checkbox - radio - switch - pin Will default to a text field if there is no matching type.
Type
string
Was this helpful?