How to create a checkbox in Sanity Studio and use its value to conditionally add CSS class?

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!