type ObjectField = {
  label: string
  name: string
  type: 'object'
  list?: boolean
  /** `fields OR `templates` may be provided, not both **/
  fields?: Field[]
  templates?: Template[]
  /** Customize the default "_template" key that gets set
     in a document to identify a block-type.
     Only applicable when list: true **/
  templatesKey?: string
  list?: boolean
  /** See https://tina.io/docs/extending-tina/overview/ for customizing the UI **/
  ui?: {
     /** Weather or not the Visual Selector  is enabled. See https://tina.io/docs/editing/blocks/#adding-a-visual-block-selector-experimental **/
    visualSelector?: boolean,
    // Note: defaultItem can only can be used when {list: true}
    defaultItem?: Record<string, any> | () => Record<string, any>,
    itemProps?(
      item: Record<string, any>
    ): {
      label?: string
    }
  }
}

Examples

Tina will generate the appropriate component depending on the configuration provided.

: {
label: "Testimonial",
name: "testimonial",
type: "object",
fields: [
{
label: "Author",
name: "author",
type: "string"
},
{
label: "Role",
name: "role",
type: "string"
},
{
label: "Quote",
name: "quote",
type: "string",
ui: {
component: "textarea"
}
}
]
}
: {
label: "Testimonials",
name: "testimonials",
type: "object",
list: true,
ui: {
itemProps: (item) => {
return { label: `${item?.author} ( ${item?.role} ) `}
},
defaultItem: {
author: "Judith Black",
role: "CEO",
quote: "Lorem ipsum dol..."
}
},
fields: [
{
name: "author",
// ...
},
{
name: "role",
// ...
},
{
name: "quote",
// ...
}
]
}
: If you always want your object to have the same fields, use the fields property. But if an object can be one of any different shape, define them as templates.
{
label: "Page Blocks",
name: "pageBlocks",
type: "object",
list: true,
templates: [
{
label: "CTA",
name: "cta",
fields: [...]
},
{
label: "Testimonial",
name: "testimonial",
fields: [...]
}
]
}