Yes/No Badge

The Yes/No Badge turns a plain true or false value into a familiar toggle switch, so a setting reads as on or off at a glance instead of as a word. It is built with a standard Microsoft List and a small piece of column-formatting JSON. The switch shows green with the knob to the right when the value is on - Yes, Active, On, or Enabled - and gray with the knob to the left when it is off, and the matching label sits beside it. It is the fastest way to make any on/off or active/inactive column scannable.

Author

SharePoint Maven

Built with

Lists

Features

Date and Time Column, JSON, Person or Group Column, Single Line of Text Column, Yes/No Column

Common Use Cases

Feature flags and tenant or site settings
Active or inactive users, vendors, or records
Published or unpublished content
Completed or not-completed checklist items
Approved or not-approved toggles
In-stock or out-of-stock products

Details

Design Pattern: Status & Indicator Badges
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Title	Single line of text	`[Title]`
Enabled	Yes/No	`[Enabled]`
Owner	Person or Group	`[Owner]`
Updated	Date and time	`[Updated]`

Prerequisites

Build a list with these columns before you paste the JSON.
Populate the list with data.
Because the JSON is applied at the column level, the Enabled column can use any name you want.
It also reads the words Yes, Active, On, and Enabled as on, so the same JSON works on a two-value choice column; anything else reads as off.

How to Apply JSON code

On the Enabled column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "inline-flex",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "box-sizing": "border-box",
        "width": "32px",
        "height": "18px",
        "border-radius": "9px",
        "padding": "0 2px",
        "justify-content": "=if((@currentField == true || @currentField == 'Yes' || @currentField == 'Active' || @currentField == 'On' || @currentField == 'Enabled' || @currentField == 'True' || @currentField == '1'), 'flex-end', 'flex-start')",
        "background-color": "=if(@currentField == '', '#edebe9', if((@currentField == true || @currentField == 'Yes' || @currentField == 'Active' || @currentField == 'On' || @currentField == 'Enabled' || @currentField == 'True' || @currentField == '1'), '#107c10', '#c8c6c4'))"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "14px",
            "height": "14px",
            "border-radius": "50%",
            "background-color": "#ffffff"
          }
        }
      ]
    },
    {
      "elmType": "span",
      "style": {
        "margin-left": "8px",
        "font-size": "12px",
        "font-weight": "600",
        "color": "=if(@currentField == '', '#8a8886', if((@currentField == true || @currentField == 'Yes' || @currentField == 'Active' || @currentField == 'On' || @currentField == 'Enabled' || @currentField == 'True' || @currentField == '1'), '#107c10', '#605e5c'))"
      },
      "txtContent": "=if(@currentField == true, 'Yes', if(@currentField == false, 'No', if(@currentField == '', 'Not set', @currentField)))"
    }
  ]
}

Common Questions About the Yes/No Badge

What is the Yes/No Badge built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want an on/off column to read at a glance without ongoing development overhead.

What kind of column does it need?

It works on a Yes/No column, which stores a true or false value. It also reads the words Yes, Active, On, and Enabled as on, so the same JSON works on a two-value choice column such as Active and Inactive. The JSON reads the current column rather than a fixed name, so it drops onto any on/off field.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can it show Active and Inactive instead of Yes and No?

Yes. The badge shows whatever word the column stores, so a choice column with Active and Inactive displays those words, while the switch still turns green for Active. You can also map your own on values – such as On, Enabled, or Live – by editing the short list inside the JSON.

Can Greg build toggle badges like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.