Get help on Discord

How to create a checkbox in Sanity Studio and conditionally add a CSS class

6 replies
Last updated: Jan 19, 2024
I am new to Sanity.How do you create a checkbox in the studio and use either a value of True or False to conditionally add a CSS class?
AI Update

Welcome to Sanity! Creating a checkbox field and using its value to conditionally add CSS classes is straightforward. Let me walk you through it.

Creating a Boolean Field as a Checkbox

In your Sanity schema, you can create a boolean field and configure it to display as a checkbox using the options.layout property. By default, boolean fields display as a switch, but you can change this to a checkbox:

{
  name: 'featured',
  title: 'Featured',
  type: 'boolean',
  options: {
    layout: 'checkbox' // This makes it appear as a checkbox instead of a switch
  }
}

According to the boolean field documentation, you can control the visual appearance using the layout option with either 'switch' (default) or 'checkbox'.

Using the Boolean Value in Your Frontend

Once you've queried your content from Sanity, you can use the boolean value to conditionally add CSS classes. Here's how you might do this in different frameworks:

React/Next.js:

function MyComponent({ document }) {
  return (
    <div className={document.featured ? 'featured-item' : 'regular-item'}>
      {/* Your content */}
    </div>
  )
}

With multiple classes:

<div className={`base-class ${document.featured ? 'is-featured' : ''}`}>

Vue/Nuxt:

<div :class="{ 'featured-item': document.featured }">
  <!-- Your content -->
</div>

Important Note About Missing Values

One thing to be aware of: new documents are created without schema-defined fields. This means a boolean field won't immediately exist in your documents until it's been assigned a value. Make sure your frontend code treats a missing boolean value as false:

// Safe approach
const isFeatured = document.featured === true;

// Or in GROQ queries
*[_type == 'post' && featured == true]

In GROQ, you can handle missing booleans and false values together: *[_type == 'story' && featured != true] will match documents where featured is false, missing, or any value that isn't true.

This pattern works great for conditional styling, showing/hiding elements, or any feature flags you need in your content!

Checkboxes are not one of Sanity's schemas types but can be created through custom components.
As for conditionally adding a CSS class you can a field like the one below to your document:

{
  title: 'Add CSS class?',
  name: 'isCSSClass',
  type: 'boolean',
}
And then in your frontend for example if you are using React you could:

<div class={isCSSClass ? 'text-large purple-bg' : ''} />
Or use a tool like clsx
What is this custom component look like in the CMS UI?
It looks like whatever you want it to be.
In your case it would to render out a checkbox.

But since you only need to a field which needs a true or false value, a field with type Boolean is more than enough.

Here's an example guide of a custom component -
https://www.sanity.io/guides/create-interactive-array-items-for-featured-elements
Thank you so much!
Please don’t post your question to multiple channels.
I wasn't sure which channel I should post. Won't do it again.

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?