Get help on Discord

Issue with "Create New" button not appearing for array type reference to category in Sanity Studio.

18 replies
Last updated: Feb 9, 2022
Can a type reference of categories linked to the page. Also have a Create new if this is a array of multiple categories? I only see this button when you pick a single category.
AI Update

You're observing a difference in how Sanity Studio handles inline document creation between single reference fields and arrays of references. When you have a single category reference, you see a "Create new" button, but when you have an array of category references, that button doesn't appear in the same way.

While I cannot find explicit documentation that explains this specific UI behavior difference, this appears to be how the Studio's interface currently works. The array fields documentation shows that arrays support features like drag-and-drop reordering, copy/paste operations, and multiple member types, which suggests the array item selection interface is optimized for choosing from existing documents rather than inline creation.

Practical Solutions

Here are some approaches you can use to work with category creation in an array context:

1. Two-Tab Workflow

Open Sanity Studio in a separate browser tab to create new categories, then return to your page document to select them. This is the most straightforward approach that works with the current Studio interface.

2. Initial Value Templates

Set up initial value templates for your category documents. This can speed up category creation by pre-filling common fields, making the tab-switching workflow less disruptive:

export default {
  name: 'category',
  type: 'document',
  initialValue: {
    status: 'active'
  }
}

3. Custom Input Component

For a more integrated experience, you could build a custom input component for your categories array that includes its own "Create new category" functionality. This requires custom React code but would give you control over the creation workflow within the array interface itself.

4. Rethink Your Content Workflow

Consider whether your team's workflow might benefit from creating categories as a separate step before building pages. Sometimes establishing your taxonomy first can be a more natural content authoring flow.

Getting More Help

If this limitation significantly impacts your workflow, I'd recommend:

  • Checking the Sanity Community to see if others have built custom solutions
  • Joining the Community Slack to discuss workarounds with other developers
  • Considering whether a custom input component might be worth the development effort for your specific use case

The behavior you're experiencing seems to be how the current Studio interface handles these different field types, rather than something you can change through schema configuration alone.

You can create a tag schema and add the refference to the schema type named page. Where you would be able to directly select one tag, or create a new one + button. If that makes sense?
But I have noticed when I want to have the same behaviour a reference but only difference that type is array. You can select like multiple tags but not create one.

What version of the Studio are you on? You should be able to create a new reference from the array input. Like so:Or am I misunderstanding you?
Latest actually mind sharing the part? I am using the OF and type array and reference tag
This?
{
      name: 'tags',
      title: 'Tags',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'category' }] }],
}
Correct! but the create new is missing if i use type array very weird
Can you run 
sanity versions
and share the output?
user M

Take a look at my screenshots
Only able to search item but not add a new one
user M
The funny part for the Author schema I see the Create new button but for instance categories I don’t.

{
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "friend" },
    },

    {
      name: "categories",
      title: "Categories",
      type: "reference",
      to: { type: "category" },
      // type: "array",
      // of: [{ type: "reference", to: { type: "category" } }],
    },

The funny part for the Author schema I see the Create new button but for instance categories I don’t.

{
      name: "author",
      title: "Author",
      type: "reference",
      to: { type: "friend" },
    },

    {
      name: "categories",
      title: "Categories",
      type: "reference",
      to: { type: "category" },
      // type: "array",
      // of: [{ type: "reference", to: { type: "category" } }],
    },

user M
Seems like if you want the “Create New” Button to appear you need to have a “slug” type otherwise It won’t work. Should it work like that ?
Have you clicked the 
Add Item
button?
category.js (doesn’t work as reference):

import React from "react";

import StringWithLimits from "../../components/StringWithLimits";

import { Tag } from "phosphor-react";

import { icon } from "../../lib/helpers";

const { color, weight, size } = icon;

export default {
  name: "category",
  type: "document",
  title: "Category",
  fields: [
    {
      name: "title",
      type: "string",
      title: "Title",
      inputComponent: StringWithLimits,
      validation: (Rule) => Rule.max(20),
    },
    {
      name: "description",
      type: "text",
      title: "Description",
    },

    {
      title: "Category Color",
      name: "colors",
      type: "colorlist",
      options: {
        tooltip: true,
        borderradius: {
          outer: "100%",
          inner: "100%",
        },
        list: [
          { title: "Red", value: "#CD113B" },
          { title: "Teal", value: "#88c6db" },
          { title: "Navy", value: "#001f3f" },
          { title: "Gray", value: "#423F3E" },
          { title: "Beige", value: "#E5B299" },
          { title: "Purple", value: "#A03C78" },
          { title: "Pink", value: "#FF94CC" },
          { title: "Green", value: "#2ECC40" },
          { title: "Yellow", value: "#ECD662" },
        ],
      },
    },
  ],

  preview: {
    select: {
      title: "title",
    },
    prepare({ title = "Undefined" }) {
      return {
        title,
        media: <Tag color={color} weight={weight} size={size} />,
      };
    },
  },
};
case.js does work


import React from "react";

import { Suitcase } from "phosphor-react";

import StringWithLimits from "../../components/StringWithLimits";

import { icon } from "../../lib/helpers";

const { color, weight, size } = icon;

export default {
  name: "case",
  title: "Cases",
  type: "document",
  icon: () => <Suitcase color={color} weight={weight} size={size} />,
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
      inputComponent: StringWithLimits,
      validation: (Rule) => Rule.max(100),
    },

    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      name: "caseManager",
      title: "Case Manager",
      type: "reference",
      to: { type: "friend" },
    },
    {
      title: "Theme",
      name: "theme",
      type: "array",
      of: [{ type: "reference", to: { type: "theme" } }],
    },
    {
      title: "Expertise",
      name: "expertise",
      type: "array",
      of: [{ type: "reference", to: { type: "expertise" } }],
    },
    {
      name: "body",
      title: "Body",
      type: "blockContent",
    },
    {
      name: "excerpt",
      type: "blockExcerpt",
      title: "Excerpt",
    },
    {
      name: "featuredImage",
      title: "Featured image",
      type: "imageWithAltText",
    },
  ],

  preview: {
    select: {
      caseTitle: "title",
      image: "featuredImage",
    },

    prepare({ caseTitle = "Untitled", image }) {
      return {
        title: caseTitle,
        media: image ? (
          image
        ) : (
          <Suitcase color={color} weight={weight} size={size} />
        ),
      };
    },
  },
};
“category” not working “case” works.

{
      name: "categories",
      title: "Categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
Am I crazy or am I doing something wrong?
user M
Yes, I did shows up on “case” type but “category” not.
I'm not sure! I'll try to reproduce but it will take me a bit!
user M
Works basically with almost all schema types but category just not working crazy!
Simplified:

category.js
export default {
  name: "category",
  type: "document",
  title: "Category",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
  ],
};

case.js
{
      title: "Categories",
      name: "categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
The “+ Create New” Button won’t shop up. I am really confused here.
Simplified:

category.js
export default {
  name: "category",
  type: "document",
  title: "Category",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
  ],
};

case.js
{
      title: "Categories",
      name: "categories",
      type: "array",
      of: [{ type: "reference", to: { type: "category" } }],
    },
The “+ Create New” Button won’t shop up. I am really confused 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.

Get started for freeExplore the demo

Was this answer helpful?