Tina Docs
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Drafts
Guides
Further Reference

object

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.

A basic object configuration

{
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"
}
}
]
}

As a list with default values

{
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",
// ...
}
]
}

Using templates instead of fields

{
label: "Page Blocks",
name: "pageBlocks",
type: "object",
list: true,
templates: [
{
label: "CTA",
name: "cta",
fields: [...]
},
{
label: "Testimonial",
name: "testimonial",
fields: [...]
}
]
}

Last Edited: July 27, 2021