Conditionally hide array item type based on document field value

3 replies
Last updated: Jun 28, 2022
Hey, all! I have an array of various object types and I want to conditionally hide some of those array types based on the value of another field. I've tried a bunch of different things and nothing seems to work. Would appreciate any advice! Here's an example of what I'm trying to do (for the last item):
{
  name: 'blocks',
  title: 'Content Blocks',
  type: 'array',
  of: [
    { type: 'introBlock' },
    { type: 'subscriptionBlock' },
    { type: 'pressMentionsBlock' },
    { type: 'videoBlock' },
    { type: 'recirculationBlock' },
    { type: 'profileBlock' },
    { type: 'eventBlock' },
    { type: 'blogFeedBlock' },
    { type: 'imagesBlock' },
    { type: 'preFooterBlock' },
    {
      type: 'blogListingBlock',
      hidden: ({ document }) => document.pageType !== 'blogListing',
    },
  ],
},
AI Update

I see what you're trying to do! Unfortunately, you've hit a known limitation in Sanity Studio - the hidden property doesn't work on individual array member types within the of array. According to the conditional fields documentation, the hidden callback works great for fields themselves, but not for specific types within an array's of configuration.

The Reality:

There isn't currently a built-in way to conditionally hide specific array member types in the insert menu based on document field values. This is a limitation that's been discussed in the community, and the official answer confirms that this functionality isn't available out of the box.

Workarounds to Consider:

1. Custom Input Component - Build a custom input component that programmatically filters which types appear in the insert menu based on document values. This gives you full control but requires more development work. You'd create a custom component that wraps the array input and conditionally renders only the types you want available.

2. Separate Array Fields with Conditional Visibility - Instead of one array with all block types, split them into separate arrays:

{
  name: 'standardBlocks',
  type: 'array',
  of: [
    { type: 'introBlock' },
    { type: 'subscriptionBlock' },
    { type: 'pressMentionsBlock' },
    // ... other standard blocks
  ],
},
{
  name: 'blogListingBlocks',
  type: 'array',
  of: [
    { type: 'blogListingBlock' },
  ],
  hidden: ({ document }) => document.pageType !== 'blogListing',
}

This approach uses conditional fields on the array itself, which does work. The downside is you lose the unified ordering of blocks across both arrays.

3. Different Document Schemas - If the pageType field fundamentally changes what content structure you need, consider using different document types entirely (e.g., a standardPage type and a blogListingPage type with different schemas). This is the cleanest approach if your page types are truly different.

4. Validation Instead of Hiding - Keep all types visible but add validation that prevents saving if blogListingBlock is used when pageType isn't 'blogListing':

{
  name: 'blocks',
  type: 'array',
  of: [/* all your types */],
  validation: Rule => Rule.custom((blocks, context) => {
    const hasBlogListingBlock = blocks?.some(block => block._type === 'blogListingBlock');
    if (hasBlogListingBlock && context.document.pageType !== 'blogListing') {
      return 'Blog Listing Block can only be used on Blog Listing pages';
    }
    return true;
  })
}

This doesn't hide the option, but it prevents incorrect usage with clear error messages.

The Bottom Line:

Unfortunately, there's no simple one-liner solution for conditionally hiding array member types in Sanity Studio. The custom input component approach gives you the most flexibility, but requires the most work. The separate arrays approach is the quickest workaround that uses native conditional field functionality. If your page types are fundamentally different, separate document schemas might be the cleanest long-term solution.

Show original thread
3 replies
There currently isn't a way of conditionally showing options inside of an array. You could use conditional fields to return an entirely different array depending on another field though.
Thanks for the response! I ended up having some more complex requirements for singleton pages, so I just used a different document altogether that has a different set of blocks, but what you're suggesting was the next thing I tried and it worked well. Appreciate it!
Glad you got it figured out!

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.

Was this answer helpful?