How to use Custom Input Components on a Field of Type ‘Object’
Great question! Yes, you can absolutely pass an object to set() and it will map the keys to the field names in your schema. This is exactly how you'd handle updating complex objects with multiple fields.
Based on your example, here's how you'd update your productInfo object:
const createPatchFrom = (value) => {
const updates = {
productId: value.productId,
storageId: value.storageId,
hasAttributes: value.hasAttributes
}
return PatchEvent.from(set(updates))
}
// Then in your component's onChange handler:
onChange(createPatchFrom({ productId: 90922, storageId: 29992, hasAttributes: true }))Or more directly:
onChange(PatchEvent.from(set({
productId: 90922,
storageId: 29992,
hasAttributes: true
})))The keys in your object need to match the name fields in your schema definition (which they do in your case: productId, storageId, and hasAttributes). When you pass this object to set(), Sanity will update all those fields at once.
One important thing to remember: PatchEvent.from() is just creating the patch action - you must call it with onChange (which is passed as a prop to your custom input component) for it to actually update the document. A common mistake is creating the PatchEvent but forgetting to invoke onChange.
If you need to ensure the object exists before setting values (useful if the field might be undefined initially), you can chain operations:
onChange(
PatchEvent.from(set(updates))
.prepend(setIfMissing({}))
)This approach works great for your use case where you're populating multiple fields from your PIM dropdown selection. The PatchEvent documentation has more details on how this integrates with Studio's real-time collaboration features.
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.