Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

How to set a default selected option in a dropdown menu in Sanity.io

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?
Jul 8, 2022, 3:15 PM
Hey
user M
! You can control what the field is set to by using an 
initialValue
.
Jul 8, 2022, 4:38 PM
Thanks. I tried initialValue: { title: "[the title of my default list element]" }, but the selected option in my dropdown was still set to blank..
Jul 8, 2022, 4:42 PM
Are you trying to set an initial value on a document that already exists?
Jul 8, 2022, 4:43 PM
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"},
        ]
      }
    },
Jul 8, 2022, 4:48 PM
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' },
                ],
              },
            },
Jul 8, 2022, 4:55 PM
Aha. Thank you! I'll try that.
Jul 8, 2022, 5:00 PM
Oh, and if it's still not working: try wrapping it in an object schema.
Jul 8, 2022, 5:02 PM
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,
      };
    },
  },
};

Jul 8, 2022, 5:09 PM
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,
      };
    },
  },
};
Jul 8, 2022, 5:12 PM
It your hero inside of an array or something in the parent document?
Jul 8, 2022, 5:16 PM
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
}
Jul 8, 2022, 5:19 PM
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",
    },
  },
};
Jul 8, 2022, 5:22 PM
It should work if you're adding a new hero to that array, then. What version of the Studio are you running?
Jul 8, 2022, 5:23 PM
I have tried to add a new page, and add a new hero page section, but the select is still set to blank
Jul 8, 2022, 5:23 PM
I might run on an old version of the Studio
Jul 8, 2022, 5:24 PM
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.
Jul 8, 2022, 5:24 PM
in the studio dependencies the version is set at: @sanity/base: "^2.3.2"
Jul 8, 2022, 5:25 PM
  "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"
  },
Jul 8, 2022, 5:26 PM
Thanks, I'll try that. So then the code itself looks correct now?
Jul 8, 2022, 5:26 PM
It does!
Jul 8, 2022, 5:27 PM
Thanks for the help and the quick response 🙂
Jul 8, 2022, 5:27 PM
Very happy to help 💪 !
Jul 8, 2022, 5:27 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?