1

I tried to use the out-of-box SharePoint "checkbox" field in a SharePoint list, however, it does not visually display as a checkbox either in classic or modern view. It was also cumbersome for users to edit. So, I chose the "choice" field instead.

Is there JSON you can share that would display the choice as a visual checkbox, that is also centered in the column?

I've used the JSON below to get the checkbox, but it is not centered.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "iconName": "=if(@currentField,'CheckboxComposite','Checkbox')",
    "class": "=if(@currentField,'ms-fontColor-neutralPrimary','ms-fontColor-neutralTertiary')+' ms-font-l'"
  }
}

1 Answer 1

0

You can center the icon by making it a child of a div using flexbox:

{
    "elmType": "div",
    "style": {
        "display": "flex",
        "justify-content": "space-evenly",
        "align-items": "center"
    },
    "children": [
        {
            "elmType": "div",
            "attributes": {
                "iconName": "=if(@currentField,'CheckboxComposite','Checkbox')",
                "class": "=if(@currentField,'ms-fontColor-neutralPrimary','ms-fontColor-neutralTertiary')+' ms-font-l'"
            }
        }
    ]
}

Format in action

Keep in mind this format will show an unchecked box when the choice field contains no value and a checked value when it does. It is not evaluating the choice value at all.

2
  • Thank you. Are you aware of a method to have display checkboxes that a user can check and uncheck without entering Quick Edit Mode or double clicking to open the metadata editing sidebar? Is there a way users can check or uncheck in the list without these extra clicks?
    – john
    Commented Oct 7, 2021 at 21:16
  • This can be accomplished through an SPFx Field Customizer. An example that uses a toggle control (but could be adapted to use a Checkbox) can be found here: github.com/pnp/sp-dev-fx-extensions/tree/main/samples/… Commented Oct 8, 2021 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.