v2.17.0Published August 26, 2021

Conditional Fields

Sanity Studio

A lot of you have been waiting for this for a while: A way to show and hide fields based on the value of some other field. The wait is over! In this release of the Sanity Studio the hidden field has been upgraded to take a callback function.

export default {
 type: 'object',
 name: 'dropdownExample',
 fields: [
   {
     name: 'kind',
     type: 'string',
     options: {list: ['foo', 'bar', 'baz']},
   },
   {
     name: 'fooOptions',
     type: 'object',
     hidden: ({parent}) => !(parent?.kind === 'foo'),
     fields: [/* ... */],
   },
   {
     name: 'barOptions',
     type: 'number',
     hidden: ({parent}) => !(parent?.kind === 'bar'),
     fields: [/* ... */],
   },
 ],
}

export default {
 type: 'object',
 name: 'dropdownExample',
 fields: [
   {
     name: 'kind',
     type: 'string',
     options: {list: ['foo', 'bar', 'baz']},
   },
   {
     name: 'fooOptions',
     type: 'object',
     hidden: ({parent}) => !(parent?.kind === 'foo'),
     fields: [/* ... */],
   },
   {
     name: 'barOptions',
     type: 'number',
     hidden: ({parent}) => !(parent?.kind === 'bar'),
     fields: [/* ... */],
   },
 ],
}

Get more code examples and read more about the details in our docs.