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'"
  }
}
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
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? 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.