Studio

Conditional fields

Conditional Fields

v2.17.0

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: [/* ... */],
   },
 ],
}
Conditional Fields with dropdown
Conditional Fields with dropdown

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