How to add headings and descriptive content to Sanity fieldsets?

8 replies
Last updated: May 25, 2021
Hey there! Just started my first Sanity project and loving it so far. I have a bunch of fieldsets that I would like to add a heading, and some content to just to give some more context on what the following fields will relate to but I can't seem to find a way to add those. Can anyone point me in the right direction? Cheers!
AI Update

Great question! You have two main options for adding headings and contextual content to organize your fields in Sanity Studio: fieldsets and field groups.

Fieldsets (Best for your use case)

Fieldsets are perfect for what you're describing. They let you group related fields together with a title and description to provide context. Here's how to use them:

defineType({
  name: 'myDocument',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      type: 'string',
    }),
    defineField({
      name: 'author',
      type: 'string',
      fieldset: 'metadata',
    }),
    defineField({
      name: 'publishDate',
      type: 'datetime',
      fieldset: 'metadata',
    }),
  ],
  fieldsets: [
    {
      name: 'metadata',
      title: 'Publication Metadata',
      description: 'These fields control when and how this article is published',
      options: { collapsible: true, collapsed: false }
    }
  ]
})

The fieldsets array is where you define your headings and descriptions, then you assign fields to a fieldset using the fieldset property. You can even make them collapsible to reduce visual clutter!

Field Groups (Alternative approach)

Field Groups create tabbed interfaces instead of visual sections. They're great when you have many fields and want to organize them into separate tabs:

defineType({
  name: 'myDocument',
  type: 'document',
  groups: [
    {
      name: 'seo',
      title: 'SEO',
      description: 'Search engine optimization settings'
    },
    {
      name: 'content',
      title: 'Content'
    }
  ],
  fields: [
    defineField({
      name: 'metaTitle',
      type: 'string',
      group: 'seo',
    }),
    defineField({
      name: 'body',
      type: 'text',
      group: 'content',
    }),
  ]
})

Which should you use?

  • Fieldsets: When you want visual sections with headings within the same view (sounds like what you need!)
  • Field Groups: When you have lots of fields and want to split them into separate tabs

Both support titles and descriptions to give editors context about what the fields relate to. The Studio Excellence course has great examples of using both to create an excellent editorial experience.

Hope this helps! Let me know how it goes šŸš€

Show original thread
8 replies
Hey Ryan! Welcome! You can specify a title and description on your fieldsets like this:
{
  type: 'object',
  name: 'person',
  fieldsets: [
    {name: 'social', title: 'Social media handles', description: 'A collection of social media handles'}
  ],
  fields: [
    {
      title: 'Name',
      name: 'name',
      type: 'string'
    },
    {
      title: 'Twitter',
      name: 'twitter',
      type: 'string',
      fieldset: 'social'
    },
    {
      title: 'Instagram',
      name: 'instagram',
      type: 'string',
      fieldset: 'social'
    },
    {
      title: 'Facebook',
      name: 'facebook',
      type: 'string',
      fieldset: 'social'
    }
  ]
}
You can find the documentation on this
here .
Oh excellent, thank you. I didn't see in the documentation that you could add a description but I also should have tried it šŸ˜„
Is it possible to add stand-alone headings and text do you know?
The description bit is missing from the docs, but I gave it a go and it worked out!Hmmm. I’m not sure re:separate headings. How are you picturing them? Like moving the headings in between the fieldset’s fields? Or am I misunderstanding?
Yeah I was thinking of something like the following:

[
  {name: "field", "type: "string", title: "Example field"},
  {type: "heading", level: 4, title: "This is a heading"},
  {type: "message", title: "This is a stand-alone piece of text"},
  {name: "field2", "type: "string", title: "Example field"},
]
Just to follow up on this, I just ended up making my own custom components šŸ™‚
Just to follow up on this, I just ended up making my own custom components šŸ™‚
Nice!
If you’d like, you can publish them to the community studio here !

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?