Category Tags

The Category Tags render a multi-choice column as a tidy row of rounded, color-coded chips instead of a run of comma-separated text, so a list of skills, tags, or categories reads cleanly and by color. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a choice column that allows multiple selections. Each value becomes its own chip, colored by a small map in the JSON, with a neutral chip for anything unmapped.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, JSON, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Renders each value of a multi-choice column as its own rounded chip
• Colors chips by a small value-to-color map in the JSON
• Reads far more cleanly than comma-separated text
• Wraps neatly onto multiple lines when there are many values
• Anything not in the color map falls back to a neutral chip
• Applied as column-formatting JSON on a choice column, so it changes nothing about the underlying data

Common Use Cases

• Skills or expertise on a people list
• Tags or topics on a knowledge base
• Categories or labels on requests
• Products or services per account
• Applicable regions or teams
• Any multi-choice column you want shown as colored chips

Details

• Design Pattern: Status & Indicator Badges
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with a choice column that allows multiple selections before you paste the JSON.
2. Then populate the list, choosing one or more values per row.
3. The JSON colors specific values by name; use these words in your choice column or edit the color map in the JSON to match yours (a neutral chip covers the rest).
4. Apply the formatting to the multi-choice column.
5. Dedicated colors are mapped only for React, Azure, SQL, Design, Figma, Python, and Excel, and the values are case-sensitive – every other value falls back to a neutral chip.

How to Apply JSON code

1. On the Skills column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. 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": "flex",
    "flex-wrap": "wrap",
    "align-items": "center",
    "padding": "3px 0"
  },
  "children": [
    {
      "forEach": "tag in @currentField",
      "elmType": "span",
      "txtContent": "[$tag]",
      "style": {
        "display": "inline-flex",
        "align-items": "center",
        "justify-content": "center",
        "box-sizing": "border-box",
        "min-width": "64px",
        "min-height": "28px",
        "padding": "4px 12px",
        "margin": "3px 6px 3px 0",
        "border-radius": "8px",
        "border-style": "solid",
        "border-width": "1px",
        "font-size": "14px",
        "font-weight": "600",
        "line-height": "20px",
        "white-space": "nowrap",
        "background-color": "=if([$tag] == 'React', '#e0e7ff', if([$tag] == 'Azure', '#dcfce7', if([$tag] == 'SQL', '#fef3c7', if([$tag] == 'Design', '#fce7f3', if([$tag] == 'Figma', '#e0f2fe', if([$tag] == 'Python', '#ede9fe', if([$tag] == 'Excel', '#dcfce7', '#eef0f2')))))))",
        "border-color": "=if([$tag] == 'React', '#c7d2fe', if([$tag] == 'Azure', '#bbf7d0', if([$tag] == 'SQL', '#fde68a', if([$tag] == 'Design', '#fbcfe8', if([$tag] == 'Figma', '#bae6fd', if([$tag] == 'Python', '#ddd6fe', if([$tag] == 'Excel', '#bbf7d0', '#d2d0ce')))))))",
        "color": "=if([$tag] == 'React', '#3730a3', if([$tag] == 'Azure', '#166534', if([$tag] == 'SQL', '#92400e', if([$tag] == 'Design', '#9d174d', if([$tag] == 'Figma', '#075985', if([$tag] == 'Python', '#5b21b6', if([$tag] == 'Excel', '#166534', '#3b3a39')))))))"
      }
    }
  ]
}

Common Questions About the Category Tags