Get help on Discord

Set default value for string list options in Sanity schema

22 replies
Last updated: Jul 8, 2022
Hi. I am trying to add a string type with a list in options. Is there a way to avoid a blank option in the dropdown by default and also set a specific option as the default selected option?
AI Update

Yes, you can control both the blank option and set a default value for a string field with a list in options!

Avoiding the blank option

When you use a list option with layout: 'dropdown', Sanity shows a blank option by default. To avoid this, you have two options:

  1. Use radio buttons instead: Set layout: 'radio' in your options. This removes the blank dropdown option entirely.

  2. Set an initial value: Use the initialValue property to pre-select a specific option.

Setting a default selected option

Use the initialValue property on your field to set which option is selected by default:

{
  title: 'Genre',
  name: 'genre',
  type: 'string',
  options: {
    list: [
      {title: 'Sci-Fi', value: 'sci-fi'},
      {title: 'Western', value: 'western'}
    ],
    layout: 'dropdown' // or 'radio'
  },
  initialValue: 'sci-fi' // Sets Sci-Fi as the default
}

Complete example

Here's a field configuration that avoids the blank option and sets a default:

{
  title: 'Genre',
  name: 'genre',
  type: 'string',
  options: {
    list: [
      {title: 'Sci-Fi', value: 'sci-fi'},
      {title: 'Western', value: 'western'},
      {title: 'Drama', value: 'drama'}
    ],
    layout: 'radio' // No blank option with radio buttons
  },
  initialValue: 'sci-fi' // Sci-Fi selected by default
}

The initialValue works with both dropdown and radio layouts. When using radio buttons, the specified value will be pre-selected. With dropdowns, it will show that value instead of a blank option when creating new documents.

You can find more details in the string type documentation and the initial values guide.

Show original thread
22 replies
Hey
user M
! You can control what the field is set to by using an 
initialValue
.
Thanks. I tried initialValue: { title: "[the title of my default list element]" }, but the selected option in my dropdown was still set to blank..
Are you trying to set an initial value on a document that already exists?
This is within my hero component. I have tried adding a new hero on a page, but it still is blank by default.Here's the schema part:

    {
      name: "color",
      type: "string",
      title: "Background Color",
      initialValue: {
        title: "Dypgrønn industri",
      },
      options: {
        list: [
          {title: "Dypgrønn industri", value: "DypgronnIndustri"},
          {title: "Lysgrønn industri", value: "LysgronnIndustri"},
          {title: "Oransje industri", value: "OransjeIndustri"},
          {title: "Blå industri", value: "BlaIndustri"},
          {title: "Grønn industri", value: "GronnIndustri"},
        ]
      }
    },
A few things: what does a hero schema look like? Second, you need to set the initial value to the value you want it to use. Like so:
{
              name: 'color',
              type: 'string',
              title: 'Background Color',
              initialValue: 'DypgronnIndustri',
              options: {
                list: [
                  { title: 'Dypgrønn industri', value: 'DypgronnIndustri' },
                  { title: 'Lysgrønn industri', value: 'LysgronnIndustri' },
                  { title: 'Oransje industri', value: 'OransjeIndustri' },
                  { title: 'Blå industri', value: 'BlaIndustri' },
                  { title: 'Grønn industri', value: 'GronnIndustri' },
                ],
              },
            },
Aha. Thank you! I'll try that.
Oh, and if it's still not working: try wrapping it in an object schema.
It still doesn't seem to work. the blank option is still selected by default.Here's my full Hero schema:

export default {
  type: "object",
  name: "hero",
  title: "Hero",
  fields: [
    {
      name: "heading",
      type: "string",
      title: "Heading",
    },
    {
      name: "tagline",
      type: "portableText",
      title: "Tagline",
    },
    {
      name: "backgroundImage",
      type: "image",
      title: "Background image",
      options: {
        hotspot: true,
      },
    },
    {
      name: "imagePlacement",
      type: "string",
      title: "Bildeplassering",
      options: {
        list: [
          {title: "Venstre", value: "last"},
          {title: "Høyre", value: "first"}
        ]
      }
    },
    {
      name: "color",
      type: "string",
      title: "Background Color",
      initialValue: "DypgrønnIndustri",
      options: {
        list: [
          {title: "Dypgrønn industri", value: "DypgronnIndustri"},
          {title: "Lysgrønn industri", value: "LysgronnIndustri"},
          {title: "Oransje industri", value: "OransjeIndustri"},
          {title: "Blå industri", value: "BlaIndustri"},
          {title: "Grønn industri", value: "GronnIndustri"},
        ]
      }
    },
    {
      name: "ctas",
      type: "array",
      title: "Call to actions",
      of: [
        {
          title: "Call to action",
          type: "cta",
        },
      ],
    },
  ],
  preview: {
    select: {
      title: "heading",
      media: "backgroundImage",
    },
    prepare({ title, media }) {
      return {
        title,
        subtitle: "Hero section",
        media,
      };
    },
  },
};

It still doesn't seem to work. The blank option is still selected by default. Here's my full hero schema:
export default {
  type: "object",
  name: "hero",
  title: "Hero",
  fields: [
    {
      name: "heading",
      type: "string",
      title: "Heading",
    },
    {
      name: "tagline",
      type: "portableText",
      title: "Tagline",
    },
    {
      name: "backgroundImage",
      type: "image",
      title: "Background image",
      options: {
        hotspot: true,
      },
    },
    {
      name: "imagePlacement",
      type: "string",
      title: "Bildeplassering",
      options: {
        list: [
          {title: "Venstre", value: "last"},
          {title: "Høyre", value: "first"}
        ]
      }
    },
    {
      name: "color",
      type: "string",
      title: "Background Color",
      initialValue: "DypgronnIndustri",
      options: {
        list: [
          {title: "Dypgrønn industri", value: "DypgronnIndustri"},
          {title: "Lysgrønn industri", value: "LysgronnIndustri"},
          {title: "Oransje industri", value: "OransjeIndustri"},
          {title: "Blå industri", value: "BlaIndustri"},
          {title: "Grønn industri", value: "GronnIndustri"},
        ]
      }
    },
    {
      name: "ctas",
      type: "array",
      title: "Call to actions",
      of: [
        {
          title: "Call to action",
          type: "cta",
        },
      ],
    },
  ],
  preview: {
    select: {
      title: "heading",
      media: "backgroundImage",
    },
    prepare({ title, media }) {
      return {
        title,
        subtitle: "Hero section",
        media,
      };
    },
  },
};
It your hero inside of an array or something in the parent document?
For example: initial values work for me if that object is inside of:
 {
      name: 'modules',
      title: 'Modules',
      type: 'array',
      of: [{ type: 'hero' }],
    },
Initial values work whenever I add a new hero. If it looks like this in a document that already exists it will not work because the document already exists:

{
  name: 'hero',
  title: 'Hero',
  type: 'hero
}
The hero is added within the my page document, the content field of type array:
export default {
  name: "page",
  type: "document",
  title: "Page",
  fieldsets: [
    {
      title: "SEO & metadata",
      name: "metadata",
    },
  ],
  fields: [
    {
      name: "title",
      type: "string",
      title: "Title",
    },
    {
      name: "content",
      type: "array",
      title: "Page sections",
      of: [
        { type: "hero" }, 
        { type: "imageSection" }, 
        { type: "textSection" }, 
        {
          title: "Dokumentasjonsliste",
          type: 'documentSection', 
        }],
    },
    {
      name: "description",
      type: "text",
      title: "Description",
      description: "This description populates meta-tags on the webpage",
      fieldset: "metadata",
    },
    {
      name: "openGraphImage",
      type: "image",
      title: "Open Graph Image",
      description: "Image for sharing previews on Facebook, Twitter etc.",
      fieldset: "metadata",
      options: { hotspot: true },
    },
  ],

  preview: {
    select: {
      title: "title",
      media: "openGraphImage",
    },
  },
};
It should work if you're adding a new hero to that array, then. What version of the Studio are you running?
I have tried to add a new page, and add a new hero page section, but the select is still set to blank
I might run on an old version of the Studio
I remember there was an old version of the Studio that had issues with updating initial values in objects in arrays. It may be worth updating to see if it resolves it.
in the studio dependencies the version is set at: @sanity/base: "^2.3.2"
  "dependencies": {
    "@sanity/base": "^2.3.2",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/color-input": "^2.2.6",
    "@sanity/components": "^2.2.6",
    "@sanity/core": "^2.2.6",
    "@sanity/default-layout": "^2.3.2",
    "@sanity/default-login": "^2.2.6",
    "@sanity/desk-tool": "^2.3.2",
    "@sanity/vision": "^2.2.6",
    "prop-types": "^15.7",
    "react": "16.14.0",
    "react-dom": "16.14.0",
    "react-icons": "^3.11.0",
    "react-moveable": "^0.22.6",
    "resize-observer": "^1.0.0",
    "sanity-plugin-media": "^1.4.8",
    "styled-components": "^5.2.0"
  },
Thanks, I'll try that. So then the code itself looks correct now?
It does!
Thanks for the help and the quick response 🙂
Very happy to help 💪 !

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?