Toggle Switch

The Toggle Switch turns a yes/no column into a real-looking on/off switch, so a boolean reads as a tactile control that is greener and clearer than a checkmark. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a yes/no field. On shows a green switch flipped right with an On label, off shows a gray switch flipped left.

Author

SharePoint Maven

Built with

Lists

Features

JSON, Single Line of Text Column, Yes/No Column

Common Use Cases

Active or inactive on accounts or users
Enabled or disabled on features or settings
Published or draft on content
Approved or not on records
Opt-in or opt-out flags
Any yes/no column you want shown as a switch

Details

Design Pattern: Status & Indicator Badges
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Account	Single line of text	`[Title]`
Active	Yes/No	`[Active]`

Prerequisites

Build a list with a yes/no column before you paste the JSON.
Then populate the list, setting each row to yes or no.
Because the JSON is applied at the column level, the yes/no column can use any name you want.
The on and off colors and labels live in the JSON – change them to match your wording.
The JSON checks for both a boolean value and the text Yes that some tenants return – keep both checks unless your tenant is confirmed to return only boolean Yes/No values.

How to Apply JSON code

On the Active 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",
    "gap": "8px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "40px",
        "height": "22px",
        "border-radius": "14px",
        "position": "relative",
        "background-color": "=if(@currentField == true || toString(@currentField) == 'Yes', '#0f7a3d', '#c8c6c4')"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "2px",
            "width": "18px",
            "height": "18px",
            "border-radius": "50%",
            "background-color": "#ffffff",
            "box-shadow": "0 1px 2px rgba(0,0,0,0.3)",
            "left": "=if(@currentField == true || toString(@currentField) == 'Yes', '20px', '2px')"
          }
        }
      ]
    },
    {
      "elmType": "span",
      "txtContent": "=if(@currentField == true || toString(@currentField) == 'Yes', 'On', 'Off')",
      "style": {
        "font-size": "12px",
        "font-weight": "600",
        "color": "=if(@currentField == true || toString(@currentField) == 'Yes', '#0f7a3d', '#605e5c')"
      }
    }
  ]
}

Common Questions About the Toggle Switch

What is the Toggle Switch 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 a yes/no column that reads as an on/off switch without ongoing development overhead.

What columns does it need?

It needs one Yes/No column, where the JSON is applied, plus any label column such as the account name. The switch position is drawn from that boolean.

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 I change the labels or colors?

Yes. The On and Off labels and the switch colors are set in the JSON. Change them to say Enabled and Disabled, or match your brand, without touching the data.

Can Greg build a design 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.