Get help on Discord

Default value for string field with radio layout in Sanity

7 replies
Last updated: Apr 11, 2021
Is there a way to define a default value for an array of items as a 
string
with a 
radio
layout?
type: 'string',
options: {
    layout: 'radio',
    list: [
        { title: 'Left', value: 'left', default: true }, // here?
        { title: 'Right', value: 'right' }
    ],
}
AI Update

The default: true property you're trying to use in the list options won't work for setting a default value for string fields with radio layouts. Instead, you need to use the initialValue property at the field level (not inside the options).

Here's the correct way to set a default value for a string field with a radio layout:

{
  name: 'alignment',
  type: 'string',
  initialValue: 'left',  // Set default here
  options: {
    layout: 'radio',
    list: [
      { title: 'Left', value: 'left' },
      { title: 'Right', value: 'right' }
    ],
  }
}

The initialValue property should be a sibling of name, type, and options - not nested inside the list items. This will pre-select the "Left" option when creating new documents.

Important note about objects: If your string field is inside an object type, initialValue works differently. According to the Sanity documentation on string types, you cannot set initialValue on individual fields within an object. Instead, you'd need to set the initial value at the parent object level or use Initial Value Templates for more complex scenarios.

For example, if this field is inside an object:

{
  name: 'myObject',
  type: 'object',
  initialValue: {
    alignment: 'left'  // Set default for the object's field here
  },
  fields: [
    {
      name: 'alignment',
      type: 'string',
      options: {
        layout: 'radio',
        list: [
          { title: 'Left', value: 'left' },
          { title: 'Right', value: 'right' }
        ],
      }
    }
  ]
}
Show original thread
7 replies
You’ll want to set the default using the 
initialValue
object, which goes outside of 
fields[]
. Assuming your 
string
is called list, you can set its 
initialValue
to the value of the radio button you want selected:

fields: [
  {
    name: 'list',
    type: 'string',
    options: {
      layout: 'radio',
      list: [
        { title: 'Left', value: 'left' },
        { title: 'Right', value: 'right' },
      ],
    }
  },
],
initialValue: {
  list: 'left'
}
Hm ok, interesting!
I've tried it on my field but it doesn't seem to work
export default {
    name: 'project_screenshots',
    title: 'Screenshots',
    type: 'object',
    fields: [
        {
            name: 'type',
            title: 'Screenshot type',
            type: 'string',
            options: {
                list: [
                    { value: 'stack', title: 'Stacked' },
                    { value: 'two-cols', title: 'Two columns' },
                ],
                layout: 'radio',
                direction: 'horizontal',
            },
            initialValue: {
                list: 'left'
            },
            preview: {
                prepare ({ title }) {
                    return {
                        title: title.value
                    }
                }
            }
        },
initialValue
will need to be a sibling of 
fields[]
.
Oh, ok. Does it work with multiple fields in an object tho?
I have multiple sets of "radios" fields in the same object
I don’t believe 
initialValue
can be set on items in an object. https://github.com/sanity-io/sanity/issues/1581
It may be possible using
Initial Value Templates . I’ll have to give it a try later.

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?