Get help on Discord

How to visually group fields with a label in Sanity documents?

2 replies
Last updated: Oct 12, 2023
Just curious, is there a way I can have inputs in a document grouped? I have found the tab system, but is there any way to simply group them visually in the document? Like, can I have a section of SEO that has all of the inputs grouped up with a label of some sort?
AI Update

Yes! Sanity offers multiple ways to visually group fields within a document, and the best approach depends on what experience you're looking for:

Field Groups (Tabs) - The Native Solution

If you want to organize fields into separate tabs, use Field Groups. This is Sanity's native feature for creating tabbed sections. Here's how to set up an SEO tab:

export default defineType({
  name: 'myDocument',
  type: 'document',
  groups: [
    {
      name: 'content',
      title: 'Content',
    },
    {
      name: 'seo',
      title: 'SEO',
    },
  ],
  fields: [
    defineField({
      name: 'title',
      type: 'string',
      group: 'content',
    }),
    defineField({
      name: 'metaTitle',
      type: 'string',
      title: 'Meta Title',
      group: 'seo', // Assigns to SEO tab
    }),
    defineField({
      name: 'metaDescription',
      type: 'text',
      title: 'Meta Description',
      group: 'seo',
    }),
    defineField({
      name: 'ogImage',
      type: 'image',
      title: 'Social Share Image',
      group: 'seo',
    }),
  ],
})

This creates actual tabs at the top of your document, separating fields into different views.

Fieldsets - Visual Grouping Within a View

If you want to keep everything on one page but create collapsible sections with labels, use Fieldsets. Fieldsets create visual boundaries around related fields:

export default defineType({
  name: 'myDocument',
  type: 'document',
  fieldsets: [
    {
      name: 'seo',
      title: 'SEO Settings',
      options: {
        collapsible: true,
        collapsed: false, // Set to true to start collapsed
      },
    },
  ],
  fields: [
    defineField({
      name: 'title',
      type: 'string',
    }),
    defineField({
      name: 'metaTitle',
      type: 'string',
      title: 'Meta Title',
      fieldset: 'seo', // Assigns to SEO fieldset
    }),
    defineField({
      name: 'metaDescription',
      type: 'text',
      title: 'Meta Description',
      fieldset: 'seo',
    }),
    defineField({
      name: 'ogImage',
      type: 'image',
      title: 'Social Share Image',
      fieldset: 'seo',
    }),
  ],
})

Fieldsets support options like:

  • collapsible: true - Makes the section expandable/collapsible
  • collapsed: true - Starts the section collapsed
  • columns: 2 - Arranges fields in a grid layout

Which Should You Use?

  • Field Groups (tabs): Best when you have many fields and want to separate them into distinct sections. Great for things like Content, SEO, Settings, Advanced options.
  • Fieldsets: Best for keeping related fields visible on the same page but visually grouped. Perfect for smaller groupings like SEO metadata, contact info, or technical settings.

Both approaches help create an effective editor experience by reducing clutter and organizing fields logically. For an SEO section specifically, either approach works well—tabs if you have many other field groups, fieldsets if you want quick access without switching views.

Show original thread
2 replies
The easiest way would likely be with fieldsets . Note the collapsible and columns options towards the end of the blurb.
Perfect, thanks, this is exactly what I needed.

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.

Get started for freeExplore the demo

Was this answer helpful?