Skip to content
Get help on SlackWatch Sanity demo

How to Conditionally set the Value of a Field Based on the Value of Another Field

2 replies
Last updated: May 2, 2022
Is there a way to conditionally set the value of a field based on the value of another field?
In detail, what I want is to present a dropdown to the user with nice human-readable 
colorTheme
names. I would also like to have to hidden string fields called 
textColor
and 
backgroundColor
, and I would like to set the value of these fields based on the value of the 
colorTheme
field. Then the user would be able to select a color field, and the API response would be something like
{
  "colorTheme": "forest",
  "textColor": "#fefefe",
  "backgroundColor": "#179e40"
}
May 2, 2022, 6:57 AM
You can do this using a custom input component for the select that patches the current document and some hidden fields, see https://www.sanity.io/docs/custom-input-widgets#1f69be67cfe0 .
But I’d rather put all these values in an object with a custom input component.


{
  name: 'theme',
  title: 'Theme',
  type: 'object',
  inputComponent: ThemeSelect,
  options: {
     themes: [{ name: 'forest', textColor: '#fefefe', backgroundColor: '#179e40' }]
  }
  fields: [
    {
      name: 'textColor',
      title: 'Text color',      
      type: 'string'
    },
    {
      name: 'backgroundColor',
      title: 'Background color',      
      type: 'string'
    }
  ]
}
I’d use
Sanity UI to add a select box in the custom component.

https://www.sanity.io/docs/custom-input-widgets

https://www.sanity.io/guides/asynchronous-list-options
May 2, 2022, 7:23 AM
Thanks, this looks like a good way to solve it!
May 2, 2022, 12:56 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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 startedWatch demo

Was this answer helpful?

Categorized in