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 (
    <AutoForm
      defaultValues={{
        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 (
    <Form
      defaultValues={{
        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#

namerequired

Description

The field name

Type
string

columns

Type
ResponsiveValue<number>

help

Description

Field help text

Type
string

hideLabel

Description

Hide the field label

Type
boolean

label

Description

The field label

Type
string

placeholder

Description

The input placeholder

Type
string

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

Type
ResponsiveValue<string | number>

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?