Creating a Field for an Image or String - Error: Invalid item type: "[object Object]"
The error you're encountering happens because you're trying to use primitive types (like plain string) directly in an array alongside object types (like image). While the exact technical reason isn't clearly documented, the practical issue is that Sanity's array input UI expects all items to be objects with consistent structure for tracking and editing purposes.
Here are the best approaches to handle an "image OR string" field:
Solution 1: Single Field with Conditional Logic (Best for Either/Or Choice)
If you need just one value that's either an image or a CSS string, use an object with conditional fields:
{
name: 'background',
type: 'object',
title: 'Background',
fields: [
{
name: 'type',
type: 'string',
title: 'Background Type',
options: {
list: [
{ title: 'Image', value: 'image' },
{ title: 'CSS Style', value: 'css' }
],
layout: 'radio'
}
},
{
name: 'image',
type: 'image',
title: 'Background Image',
hidden: ({ parent }) => parent?.type !== 'image'
},
{
name: 'cssValue',
type: 'string',
title: 'CSS Value',
description: 'e.g., linear-gradient(...) or #ff0000',
hidden: ({ parent }) => parent?.type !== 'css'
}
]
}This gives you a clean UI where editors select the type, and only the relevant field shows up.
Solution 2: Wrap the String in an Object (For Arrays)
If you need an array or want both types as selectable options, wrap the string value in an object type:
{
name: 'backgroundOptions',
type: 'array',
title: 'Background Options',
of: [
{
type: 'image',
title: 'Image Background'
},
{
type: 'object',
name: 'cssBackground',
title: 'CSS Background',
fields: [
{
name: 'value',
type: 'string',
title: 'CSS Value',
description: 'e.g., linear-gradient(...) or #ff0000'
}
],
preview: {
select: { value: 'value' },
prepare({ value }) {
return {
title: 'CSS Background',
subtitle: value
}
}
}
}
]
}This way, both items in the array are objects, which the array input can handle properly. The preview configuration helps make the CSS option display nicely in the Studio UI.
Choose Solution 1 if you only need one background value at a time. Choose Solution 2 if you need multiple options or want to maintain array functionality. Both approaches avoid the "Default array input can only contain objects" error by ensuring all array members are properly structured objects.
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.