Search code examples
slackslack-apislack-block-kit

How can i make check boxes in slack app home selected be default


Slack lets you build a UI quite easily using block kit builder, including adding checkboxes: How do I make all checkboxes selected by default on (using JS)? Is there anyway to make even 1 check box selected when user opens app home? If I can do one, the rest should be easy enough.

{
"type": "home",
"blocks": [
    {
    "type": "input",
    "element": {
        "type": "checkboxes",
        "options": [
            {
                "text": {
                    "type": "plain_text",
                    "text": "*this is plain_text text*",
                    "emoji": true
                },
                "value": "value-0"
            },
            {
                "text": {
                    "type": "plain_text",
                    "text": "*this is plain_text text*",
                    "emoji": true
                    },
                  "value": "value-1"
              }
          ],
          "action_id": "checkboxes-action"
      },
      "label": {
          "type": "plain_text",
          "text": "Label",
          "emoji": true
      }
  }
]
}

Solution

  • You need to use field initial_options in your block kit code.
    https://api.slack.com/reference/block-kit/block-elements#checkboxes__fields

    initial_options

    An array of option objects that exactly matches one or more of the options within options. These options will be selected when the checkbox group initially loads.

    Sample

    "initial_options": [
                    {
                        "text": {
                            "type": "plain_text",
                            "text": "*this is plain_text text*",
                            "emoji": true
                        },
                        "value": "value-0"
                    },
                    {
                        "text": {
                            "type": "plain_text",
                            "text": "*this is plain_text text*",
                            "emoji": true
                        },
                        "value": "value-1"
                    }
                ],
    

    Example:

    {
        "type": "home",
        "blocks": [
            {
                "type": "input",
                "element": {
                    "type": "checkboxes",
                    "initial_options": [
                        {
                            "text": {
                                "type": "plain_text",
                                "text": "*this is plain_text text*",
                                "emoji": true
                            },
                            "value": "value-0"
                        },
                        {
                            "text": {
                                "type": "plain_text",
                                "text": "*this is plain_text text*",
                                "emoji": true
                            },
                            "value": "value-1"
                        }
                    ],
                    "options": [
                        {
                            "text": {
                                "type": "plain_text",
                                "text": "*this is plain_text text*",
                                "emoji": true
                            },
                            "value": "value-0"
                        },
                        {
                            "text": {
                                "type": "plain_text",
                                "text": "*this is plain_text text*",
                                "emoji": true
                            },
                            "value": "value-1"
                        }
                    ],
                    "action_id": "checkboxes-action"
                },
                "label": {
                    "type": "plain_text",
                    "text": "Label",
                    "emoji": true
                }
            }
        ]
    }