Blocks are a series of components that can be combined to create visually rich and compellingly interactive messages.
Read our guide to composing rich message layouts to learn where and how to use each of these components. You can include up to 50 blocks in each message.
The lists of fields and values below describe the JSON that apps can use to generate each block:
| Block type | Available in surfaces |
|---|---|
| Actions | Modals Home tabs |
| Context | Modals Home tabs |
| Divider | Modals Home tabs |
| File | |
| Image | Modals Home tabs |
| Input | Modals |
| Section | Modals Home tabs |
Available in surfaces: Modals Home tabs
A section is one of the most flexible blocks available - it can be used as a simple text block, in combination with text fields, or side-by-side with any of the available block elements.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For a section block, type will always be section. |
text |
Object | Yes | The text for the block, in the form of a text object. Maximum length for the text in this field is 3000 characters. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id. |
fields |
Object[] | No | An array of text objects. Any text objects included with fields will be rendered in a compact format that allows for 2 columns of side-by-side text. Maximum number of items is 10. Maximum length for the text in each item is 2000 characters. Click here for an example. |
accessory |
Object | No | One of the available element objects. |
A simple text section block:
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "A message *with some bold text* and _some italicized text_."
}
}
A section block containing text fields:
{
"type": "section",
"text": {
"text": "A message *with some bold text* and _some italicized text_.",
"type": "mrkdwn"
},
"fields": [
{
"type": "mrkdwn",
"text": "High"
},
{
"type": "plain_text",
"emoji": true,
"text": "String"
}
]
}
A section block containing a datepicker element:
{
"type": "section",
"text": {
"text": "*Sally* has requested you set the deadline for the Nano launch project",
"type": "mrkdwn"
},
"accessory": {
"type": "datepicker",
"action_id": "datepicker123",
"initial_date": "1990-04-28",
"placeholder": {
"type": "plain_text",
"text": "Select a date"
}
}
}
Available in surfaces: Modals Home tabs
A content divider, like an <hr>, to split up different blocks inside of a message. The divider block is nice and neat, requiring only a type.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For a divider block, type is always divider. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, one will be generated. Maximum length for this field is 255 characters. |
{
"type": "divider"
}
Available in surfaces: Modals Home tabs
A simple image block, designed to make those cat photos really pop.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For an image block, type is always image. |
image_url |
String | Yes | The URL of the image to be displayed. Maximum length for this field is 3000 characters. |
alt_text |
String | Yes | A plain-text summary of the image. This should not contain any markup. Maximum length for this field is 2000 characters. |
title |
Object | No | An optional title for the image in the form of a text object that can only be of type: plain_text. Maximum length for the text in this field is 2000 characters. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, a block_id will be generated. Maximum length for this field is 255 characters. |
{
"type": "image",
"title": {
"type": "plain_text",
"text": "Please enjoy this photo of a kitten"
},
"block_id": "image4",
"image_url": "http://placekitten.com/500/500",
"alt_text": "An incredibly cute kitten."
}
Available in surfaces: Modals Home tabs
A block that is used to hold interactive elements.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For an actions block, type is always actions. |
elements |
Object[] | Yes | An array of interactive element objects - buttons, select menus, overflow menus, or date pickers. There is a maximum of 5 elements in each action block. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, a block_id will be generated. Maximum length for this field is 255 characters. |
An actions block with a select menu and a button:
{
"type": "actions",
"block_id": "actions1",
"elements": [
{
"type": "static_select",
"placeholder":{
"type": "plain_text",
"text": "Which witch is the witchiest witch?"
},
"action_id": "select_2",
"options": [
{
"text": {
"type": "plain_text",
"text": "Matilda"
},
"value": "matilda"
},
{
"text": {
"type": "plain_text",
"text": "Glinda"
},
"value": "glinda"
},
{
"text": {
"type": "plain_text",
"text": "Granny Weatherwax"
},
"value": "grannyWeatherwax"
},
{
"text": {
"type": "plain_text",
"text": "Hermione"
},
"value": "hermione"
}
]
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Cancel"
},
"value": "cancel",
"action_id": "button_1"
}
]
}
An actions block with a datepicker, an overflow, and a button:
{
"type": "actions",
"block_id": "actionblock789",
"elements": [
{
"type": "datepicker",
"action_id": "datepicker123",
"initial_date": "1990-04-28",
"placeholder": {
"type": "plain_text",
"text": "Select a date"
}
},
{
"type": "overflow",
"options": [
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-0"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-1"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-2"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-3"
},
{
"text": {
"type": "plain_text",
"text": "*this is plain_text text*"
},
"value": "value-4"
}
],
"action_id": "overflow"
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Click Me"
},
"value": "click_me_123",
"action_id": "button"
}
]
}
Available in surfaces: Modals Home tabs
Displays message context, which can include both images and text.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For a context block, type is always context. |
elements |
Object[] | Yes | An array of image elements and text objects. Maximum number of items is 10. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, a block_id will be generated. Maximum length for this field is 255 characters. |
{
"type": "context",
"elements": [
{
"type": "image",
"image_url": "https://image.freepik.com/free-photo/red-drawing-pin_1156-445.jpg",
"alt_text": "images"
},
{
"type": "mrkdwn",
"text": "Location: **Dogpatch**"
}
]
}
Available in surfaces: Modals
A block that collects information from users - it can hold a plain-text input element, a select menu element, a multi-select menu element, or a datepicker.
Read our guide to using modals to learn how input blocks pass information to your app.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For an input block, type is always input. |
label |
Object | Yes | A label that appears above an input element in the form of a text object that must have type of plain_text. Maximum length for the text in this field is 2000 characters. |
element |
Object | Yes | An plain-text input element, a select menu element, a multi-select menu element, or a datepicker. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, one will be generated. Maximum length for this field is 255 characters. block_id should be unique for each message and each iteration of a message. If a message is updated, use a new block_id. |
hint |
Object | No | An optional hint that appears below an input element in a lighter grey. It must be a a text object with a type of plain_text. Maximum length for the text in this field is 2000 characters. |
optional |
Boolean | No | A boolean that indicates whether the input element may be empty when a user submits the modal. Defaults to false. |
Available in surfaces:
Displays a remote file.
| Field | Type | Required? | Description |
|---|---|---|---|
type |
String | Yes | The type of block. For a file block, type is always file. |
external_id |
String | Yes | The external unique ID for this file. |
source |
String | Yes | At the moment, source will always be remote for a remote file. |
block_id |
String | No | A string acting as a unique identifier for a block. You can use this block_id when you receive an interaction payload to identify the source of the action. If not specified, a block_id will be generated. Maximum length for this field is 255 characters. |
{
"type": "file",
"external_id": "ABCD1",
"source": "remote",
}