Add Tabs to Document in Structure Builder

27 replies
Last updated: Dec 3, 2021
Is there a easy way to add Tabs per say to a document in the structure builder?
AI Update

Yes! Sanity has a native feature called Field Groups that lets you organize document fields into tabs directly in your schema. This is the recommended way to add tabs to documents in Sanity Studio (works in both v2 and v3).

Here's how to implement it:

Basic Implementation

First, define your groups in the document schema, then assign fields to those groups:

export default defineType({
  name: 'article',
  type: 'document',
  groups: [
    {
      name: 'content',
      title: 'Content',
    },
    {
      name: 'seo',
      title: 'SEO',
    },
    {
      name: 'settings',
      title: 'Settings',
    }
  ],
  fields: [
    defineField({
      name: 'title',
      type: 'string',
      group: 'content', // Assigns this field to the content tab
    }),
    defineField({
      name: 'slug',
      type: 'slug',
      group: 'seo', // Assigns this field to the SEO tab
    }),
    defineField({
      name: 'publishedAt',
      type: 'datetime',
      group: 'settings', // Assigns this field to the settings tab
    }),
  ]
})

Key Benefits

  • Native solution - Built into Sanity, no plugins needed
  • Doesn't affect data structure - Groups are purely for UI organization
  • Better editorial experience - Reduces clutter and helps editors focus on related fields
  • Flexible - Fields without a group assignment remain accessible

Note on Structure Builder

Field Groups are defined at the schema level, not in the Structure Builder. The Structure Builder is for organizing how documents appear in the navigation/sidebar, while Field Groups organize the fields within a document's editing interface.

If you need more complex layouts, you can also check out Fieldsets for collapsible sections within a tab, or look into third-party plugins like sanity-plugin-tabs, though the native Field Groups feature is generally the best approach for most use cases.

Show original thread
27 replies
You can use fieldsets to group things without affecting the actual data structure.
Then there’s a plugin for Sanity that will turn your fieldset groups into tabs.
Perfect!
user S
using that plugin forces you to create an object which is changing the data structure
Yes - I just realised that. It’s either changed or I was thinking of a different one. Thanks for pointing that out
user S
Well, we aren't set on data structure yet so I think this still works. Would there be a drawback to using a object to group fieldsets?
Let me know if you find one without structure changes. I'm looking for that :)
This seems to be 'define fieldsets', 'specify fieldset' right?
Which is good, maybe not the fact its 'ALPHA ALPHA ALPHA' haha
Actually - I think that’s just the example. I believe in the one I linked you can apply that to the parent document / object so that it ISN’t affecting your structure.
I could be wrong though. I used something like this on a project last year and it didn’t require schema changes.
I'm pretty much there so I'll just try it out and see ha
So -- didn't have to create a object.
But I only get fieldsets, no tabs ha
Did you add the input component?
Probably cause i'm not using the 'inputComponent', which seems to be required as a object?
No.. but I guess that has to be a top level object in the document fields?
inputComponent is a React component. it’s provided by the plugin
It would have to be on the document:
Right, how do I specify it to be used without nesting my document under a Object?
I think it would be…
{
  type: "document",
  title: `Frontpage`,
  name: `frontpage`,
  inputComponent: Tabs,
  fieldsets: [...]
  fields: [...]
}

Cool so I have tabs and didn't have to change any structure.
Noice! cc
user S
☝️
oh that's cool.
Yes

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?