Show/Hide Field Based on Boolean in Sanity - How Does It Work?

11 replies
Last updated: Oct 11, 2022
hi all !i'm new to sanity. this is so amazing to learn.

here is my question,

i need a text field to show and hide based on a boolean.
i changed a bit of code from
user A
"Conditional validation of string" and i endup with the below code and it worked.but i need to understand how this work. can someone please explain this to me.
if you have a better solution for this i also like to hear them too. thnx

{
name: "flag",
title: "Show or Hide",
type: "boolean",
},
{
name: "entry",
type: "string",
title: "Entry",
hidden: ({document}) => !document.flag
},
AI Update

Great question! Your code is working perfectly, and you've actually discovered one of Sanity's most useful features - Conditional Fields. Let me break down exactly how it works:

How Your Code Works

{
  name: "flag",
  title: "Show or Hide",
  type: "boolean",
},
{
  name: "entry",
  type: "string",
  title: "Entry",
  hidden: ({document}) => !document.flag
}

The hidden property accepts a callback function that determines whether the field should be hidden. This function:

  1. Receives a parameter object with {document} - this gives you access to the entire document being edited
  2. Returns a boolean - true means hide the field, false means show it
  3. Evaluates !document.flag - the ! (not operator) flips the boolean value:
    • When flag is true!document.flag is false → field is shown
    • When flag is false!document.flag is true → field is hidden

So your "entry" field appears when the checkbox is checked, and disappears when unchecked!

Other Useful Patterns

The callback function gives you access to several parameters you can use:

hidden: ({parent, document, value, currentUser}) => {
  // parent - the parent object (useful in nested fields)
  // document - the entire document
  // value - the current field's value
  // currentUser - info about who's editing
}

Example with multiple conditions:

{
  name: "specialContent",
  type: "text",
  hidden: ({document}) => document.contentType !== 'premium' || !document.isPublished
}

Example using parent (for fields inside objects):

{
  name: 'videoUrl',
  type: 'url',
  hidden: ({parent}) => parent?.mediaType !== 'video'
}

Pro Tip: Conditional Validation

If you ever need a field to be required only when visible, combine conditional fields with conditional validation:

{
  name: "entry",
  type: "string",
  hidden: ({document}) => !document.flag,
  validation: (Rule) => Rule.custom((value, context) => {
    if (context.document?.flag && !value) {
      return 'Entry is required when flag is checked'
    }
    return true
  })
}

Your solution is actually the recommended approach - clean, simple, and exactly how Sanity intended conditional fields to work. Welcome to Sanity, and happy building! 🎉

Show original thread
11 replies
Welcome
user R
!
The code you’ve constructed makes use of a callback function that’s returning
true
or
false
to your
entry
field’s
hidden
property.
({document}) => !document.flag
is destructuring
document
from the argument being passed to the callback function, which gives you access to the value of the
flag
field. If
flag
is true, then
!document.flag
is false, which means
entry
will not be hidden. If
flag
is false (or indeterminate and therefore undefined),
!document.flag
is true, which means
entry
will be hidden.
As for your request for better solutions, we recommend optional chaining in case
document
is undefined (so
!document.flag
becomes
!document?.flag
). You may also want to confirm that the behaviour you’re getting when
flag
is indeterminate (e.g., unset or “in the middle”) is what you want. Undefined is falsy so
!flag
will resolve to
true
when
flag === undefined
.
Really nice job adapting some code for your own use. Looking forward to seeing what you continue to build. 😀
Thank you
user A
for your explanation.
i should telll you english not my main language. therefore sometimes its hard to understand something for first time.
I understand. If there is anything that is still unclear, please let us know.
as i understand from your answer. is this the right way that i should define the code ?
the output was this
That looks good to me. 👍
thanks for your time and help.really appreciate it
😊 👍
Our pleasure! 😁
user A
quick question.how do i find latest apiVersion for client.js ?

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.

Was this answer helpful?