Change the layout of the multi-choice column

 Posted on January 26, 2024

Learn how to change the layout of a multi-choice column in SharePoint

The multi-choice field can look a little tivoli if you have many options, and the overflow does, in my opinion, not look very good 👇

SharePoint list showing a multi-choice column with the default colored pill styling and overflow when many options are selected

We have the possibility to remove the style, but I actually also like that the user can distinguish between the choices.

Here is the standard formatting without colors 👇

SharePoint multi-choice column with default formatting stripped, showing choices as plain comma-separated text without colors

Change the layout with column formatting

We are going to change the layout to look like this 👇

SharePoint multi-choice column formatted with JSON showing each choice stacked vertically in a rounded grey pill with padding

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "start",
    "margin": "3px",
    "overflow": "hidden"
  },
  "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
  },
  "children": [
    {
      "elmType": "div",
      "forEach": "choice in @currentField",
      "style": {
        "margin": "5px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "white-space": "nowrap",
        "max-width": "100%",
        "padding": "5px",
        "border-radius": "5px",
        "background-color": "#eaeaea",
        "box-sizing": "border-box"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "[$choice]"
        }
      ]
    }
  ]
}

The multi choice column in SharePoint is a bit advanced to work with, but we are going trough each choice (forEach) of the fields in @currentField, and then we take the property [$choice] and show it in the column

The width of the elements are all different, so you could change “max-width” to “width”: “200px” or whatever size fits, to make all of the choices have the same width. Depending on which choices you have, that can also look pretty.

Play around with the “padding” also. You can change all of the sides (and up and down) by writing “padding”:“5px 10px 10px 10px” or something similar

You can also change the “nowrap” to “wrap” do display the entire text

Another example

We can also change the look to behave a bit more like a tag (or behaving a bit more like the standard formatting)

SharePoint multi-choice column formatted as inline tags with a hash prefix and rounded grey background, displayed horizontally

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "forEach": "choice in @currentField",
          "elmType": "div",
          "style": {
            "padding": "5px",
            "border-radius": "5px",
            "background-color": "#eaeaea",
            "display": "inline-block",
            "margin": "5px"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "='# ' + [$choice]"
            }
          ]
        }
      ]
    }
  ]
}

You can play around a little with the “style” of the code, just look up “css” and “overflow” or “display”, but I think these two examples covers many use cases

Single choice

If you would like to apply the same type of formatting to a single choice field, use this code instead

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "start",
    "margin": "3px",
    "overflow": "hidden"
  },
  "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "margin": "5px 0px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "white-space": "nowrap",
        "max-width": "100%",
        "padding": "5px",
        "border-radius": "5px",
        "background-color": "#eaeaea",
        "box-sizing": "border-box",
        "display": "=if(Number(@currentField) == 0, 'none', 'inline')"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "@currentField"
        }
      ]
    }
  ]
}

With this code you can now prettify your SharePoint list for the multi choice or single choice columns
‎


SharePoint  Beginner  Column Formatting 

See also