We use cookies to improve your experience. By continuing, you agree to our use of cookies. Learn More

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

object Type

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
// See https://tina.io/docs/extending-tina/overview/ for customizing the UI
ui?: {
// Whether or not the Visual Selector is enabled. See https://tina.io/docs/editing/blocks/#adding-a-visual-block-selector-experimental
visualSelector?: boolean,
// 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 list object as a wrapper for other types

Number, boolean, datetime and rich-text field types can be used in this way to add list options to the TinaCMS editor.

Reference field types can be used in this way to create a list of references.

{
label: "Author List",
name: "authorList",
type: "object",
list: true,
fields: [
{
label: 'Author',
name: 'author',
type: 'reference',
collections: ['author'],
},
]
}

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: September 12, 2024