Conditional Form Fields in Sanity Order Schema Based on Category
Based on your question, it sounds like you need to handle different form fields in your order schema depending on the product category (logo vs web). Sanity's conditional fields feature is perfect for this use case!
Here's how to set up your order schema to show different fields based on category:
export default {
name: 'order',
type: 'document',
title: 'Order',
fields: [
{
name: 'orderId',
type: 'string',
title: 'Order ID'
},
{
name: 'customerEmail',
type: 'string',
title: 'Customer Email'
},
{
name: 'customerName',
type: 'string',
title: 'Customer Name'
},
{
name: 'category',
type: 'string',
title: 'Category',
options: {
list: [
{title: 'Logo', value: 'logo'},
{title: 'Web', value: 'web'}
]
}
},
// Logo-specific fields
{
name: 'logoStyle',
type: 'string',
title: 'Logo Style',
hidden: ({document}) => document?.category !== 'logo'
},
{
name: 'colorPreferences',
type: 'string',
title: 'Color Preferences',
hidden: ({document}) => document?.category !== 'logo'
},
{
name: 'logoInspiration',
type: 'text',
title: 'Logo Inspiration',
hidden: ({document}) => document?.category !== 'logo'
},
// Web-specific fields
{
name: 'websiteType',
type: 'string',
title: 'Website Type',
hidden: ({document}) => document?.category !== 'web'
},
{
name: 'numberOfPages',
type: 'number',
title: 'Number of Pages',
hidden: ({document}) => document?.category !== 'web'
},
{
name: 'features',
type: 'array',
title: 'Required Features',
of: [{type: 'string'}],
hidden: ({document}) => document?.category !== 'web'
},
// Common fields
{
name: 'amount',
type: 'number',
title: 'Amount'
},
{
name: 'package',
type: 'string',
title: 'Package'
},
{
name: 'currency',
type: 'string',
title: 'Currency'
}
]
}The key is using the hidden property with a callback function that checks the category field value. When category is set to 'logo', only logo-related fields will be visible. When it's 'web', only web-related fields will show.
If you need to make certain fields required only when visible, you can add conditional validation:
{
name: 'logoStyle',
type: 'string',
title: 'Logo Style',
hidden: ({document}) => document?.category !== 'logo',
validation: (Rule) =>
Rule.custom((currentValue, {document}) => {
if (document?.category === 'logo' && !currentValue) {
return 'Logo style is required for logo orders'
}
return true
})
}This approach keeps your schema clean and provides a better editing experience by only showing relevant fields based on the order category. The conditional fields feature has been part of Sanity Studio since v2.17.0 and works seamlessly with the document editing interface.
Show original thread5 replies
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.