Reference: Block elements

Block elements can be used inside of section, context, input and actions layout blocks.

Our overview of app surfaces that support Block Kit shows you where add blocks.

Finally, our handling user interactivity guide will help you prepare your app to allow for the use of the interactive components listed below.

The lists of fields and values below describe the JSON that apps can use to generate each element:

Button
Checkboxes
Date picker
Datetime picker
Email input
Image
Multi-select menu
Number input
Overflow menu
Plain-text input
Radio button group
Select menus
Time picker
URL input

Button element

Works with block types: Section Actions

An interactive component that inserts a button. The button can be a trigger for anything from opening a simple link to starting a complex workflow.

To use interactive components, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a button element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `button`.
`text`	Object	Yes	A text object that defines the button's text. Can only be of `type: plain_text`. `text` may truncate with ~30 characters. Maximum length for the `text` in this field is 75 characters.
`action_id`	String	Yes	An identifier for this action. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`url`	String	No	A URL to load in the user's browser when the button is clicked. Maximum length for this field is 3000 characters. If you're using `url`, you'll still receive an interaction payload and will need to send an acknowledgement response.
`value`	String	No	The value to send along with the interaction payload. Maximum length for this field is 2000 characters.
`style`	String	No	Decorates buttons with alternative visual color schemes. Use this option with restraint. `primary` gives buttons a green outline and text, ideal for affirmation or confirmation actions. `primary` should only be used for one button within a set. `danger` gives buttons a red outline and text, and should be used when the action is destructive. Use `danger` even more sparingly than `primary`. If you don't include this field, the default button style will be used. The image above shows the three different style options.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog after the button is clicked.
`accessibility_label`	String	No	A label for longer descriptive text about a button element. This label will be read out by screen readers instead of the button `text` object. Maximum length for this field is 75 characters.

Examples

A regular interactive button:

{
  "type": "button",
  "text": {
    "type": "plain_text",
    "text": "Click Me"
  },
  "value": "click_me_123",
  "action_id": "button"
}

A button with a primary style attribute:

{
  "type": "button",
  "text": {
    "type": "plain_text",
    "text": "Save"
  },
  "style": "primary",
  "value": "click_me_123",
  "action_id": "button"
}

A link button:

{
  "type": "button",
  "text": {
    "type": "plain_text",
    "text": "Link Button"
  },
  "url": "https://api.slack.com/block-kit"
}

View an example

Checkbox groups

Works with block types: Section Actions Input

A checkbox group that allows a user to choose multiple items from a list of possible options.

Checkboxes are only supported in the following app surfaces: Home tabs Modals Messages

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a checkbox element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `checkboxes`.
`action_id`	String	Yes	An identifier for the action triggered when the checkbox group is changed. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`options`	Object[]	Yes	An array of option objects. A maximum of 10 options are allowed.
`initial_options`	Object[]	No	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.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after clicking one of the checkboxes in this element.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.

Example

A section block containing a group of checkboxes:

{
	"type": "modal",
	"title": {
		"type": "plain_text",
		"text": "My App",
		"emoji": true
	},
	"submit": {
		"type": "plain_text",
		"text": "Submit",
		"emoji": true
	},
	"close": {
		"type": "plain_text",
		"text": "Cancel",
		"emoji": true
	},
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "plain_text",
				"text": "Check out these charming checkboxes"
			},
			"accessory": {
				"type": "checkboxes",
				"action_id": "this_is_an_action_id",
				"initial_options": [{
					"value": "A1",
					"text": {
						"type": "plain_text",
						"text": "Checkbox 1"
					}
				}],
				"options": [
					{
						"value": "A1",
						"text": {
							"type": "plain_text",
							"text": "Checkbox 1"
						}
					},
					{
						"value": "A2",
						"text": {
							"type": "plain_text",
							"text": "Checkbox 2"
						}
					}
				]
			}
		}
	]
}

View an example

Date picker element

Works with block types: Section Actions Input

An element which lets users easily select a date from a calendar style UI.

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a datepicker element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `datepicker`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_date`	String	No	The initial date that is selected when the element is loaded. This should be in the format `YYYY-MM-DD`.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a date is selected.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the datepicker. Maximum length for the `text` in this field is 150 characters.

Example

A section block containing a datepicker element:

{
  "type": "section",
  "block_id": "section1234",
  "text": {
    "type": "mrkdwn",
    "text": "Pick a date for the deadline."
  },
  "accessory": {
    "type": "datepicker",
    "action_id": "datepicker123",
    "initial_date": "1990-04-28",
    "placeholder": {
      "type": "plain_text",
      "text": "Select a date"
    }
  }
}

View an example

Datetime picker element

Works with block types: Actions Input

An element that allows the selection of both a date and a time of day formatted as a UNIX timestamp.

On desktop clients, the time picker will take the form of a dropdown list and the date picker will take the form of a dropdown calendar. Both options will have free-text entry for precise choices. On mobile clients, the time picker and date picker will use native UIs.

Date Time Picker elements are supported in the following app surfaces: Modals

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a date time picker element

Fields

Fields	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `datetimepicker`.
`action_id`	String	Yes	An identifier for the input value when the parent modal is submitted. You can use this when you receive a `view_submission` payload to identify the value of the input element. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_date_time`	Integer	No	The initial date and time that is selected when the element is loaded, represented as a UNUIX timestamp in seconds. This should be in the format of 10 digits, for example `1628633820` represents the date and time August 10th, 2021 at 03:17pm PST.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a time is selected.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.

Example

A section block containing a date-time picker element, with the initial time date set to August 10th, 2021 and time set to 03:17pm PST:

{
  "type": "input",
  "element": {
    "type": "datetimepicker",
    "action_id": "datetime_input",
	"initial_date_time": 1628633820
  }
}

Email input element

Works with block types: Input

Email input elements are supported in the following app surfaces: Modals

Fields

Fields	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `email_text_input`.
`action_id`	String	Yes	An identifier for the input value when the parent modal is submitted. You can use this when you receive a `view_submission` payload to identify the value of the input element. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_value`	String	No	The initial value in the email input when it is loaded.
`dispatch_action_config`	Object	No	A dispatch configuration object that determines when during text input the element returns a `block_actions` payload.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown in the email input. Maximum length for the `text` in this field is 150 characters.

Example

An input block containing a email-text input element.

{
  "type": "input",
  "block_id": "input123",
  "label": {
    "type": "plain_text",
    "text": "Email Address"
  },
  "element": {
    "type": "email_text_input",
    "action_id": "email_text_input-action",
    "placeholder": {
      "type": "plain_text",
      "text": "Enter an email"
    }
  }
}

Image element

Works with block types: Section Context

An element to insert an image as part of a larger block of content. If you want a block with only an image in it, you're looking for the image block.

An example of an image element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `image`.
`image_url`	String	Yes	The URL of the image to be displayed.
`alt_text`	String	Yes	A plain-text summary of the image. This should not contain any markup.

Example

{
  "type": "image",
  "image_url": "http://placekitten.com/700/500",
  "alt_text": "Multiple cute kittens"
}

View an example

Multi-select menu element

A multi-select menu allows a user to select multiple items from a list of options. Just like regular select menus, multi-select menus also include type-ahead functionality, where a user can type a part or all of an option string to filter the list.

To use interactive components, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a multi-select element

There are different types of multi-select menu that depend on different data sources for their lists of options:

Menu with static options
Menu with external data source
Menu with user list
Menu with conversations list
Menu with channels list

Static options

Works with block types: Section Input

This is the simplest form of select menu, with a static list of options passed in when defining the element.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `multi_static_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`options`	Object[]	Yes	An array of option objects. Maximum number of options is 100. If `option_groups` is specified, this field should not be.
`option_groups`	Object[]	No	An array of option group objects. Maximum number of option groups is 100. If `options` is specified, this field should not be.
`initial_options`	Object[]	No	An array of option objects that exactly match one or more of the options within `options` or `option_groups`. These options will be selected when the menu initially loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears before the multi-select choices are submitted.
`max_selected_items`	Integer	No	Specifies the maximum number of items that can be selected in the menu. Minimum number is 1.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A static multi-select menu

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick items from the list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "multi_static_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select items"
      },
      "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"
        }
      ]
    }
  }
]

View an example

External data source

Works with block types: Section Input

This menu will load its options from an external data source, allowing for a dynamic list of options.

Setup

To use this menu type, you'll need to configure your app first:

Go to your app's settings page and select Interactivity & Shortcuts from the sidebar.
Add a URL to the Options Load URL under Select Menus.
Save changes.

Each time a menu of this type is opened or the user starts typing in the typeahead field, we'll send a request to your specified URL. Your app should return an HTTP 200 OK response, along with an application/json post body with an object containing either an options array, or an option_groups array. Here's an example response:

{
  "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"
    }
  ]
}

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `multi_external_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`min_query_length`	Integer	No	When the typeahead field is used, a request will be sent on every character change. If you prefer fewer requests or more fully ideated queries, use the `min_query_length` attribute to tell Slack the fewest number of typed characters required before dispatch. The default value is `3`.
`initial_options`	Object[]	No	An array of option objects that exactly match one or more of the options within `options` or `option_groups`. These options will be selected when the menu initially loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears before the multi-select choices are submitted.
`max_selected_items`	Integer	No	Specifies the maximum number of items that can be selected in the menu. Minimum number is 1.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A multi-select menu in a section block with an external data source:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick items from the list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "multi_external_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select items"
      },
      "min_query_length": 3
    }
  }
]

User list

Works with block types: Section Input

This multi-select menu will populate its options with a list of Slack users visible to the current user in the active workspace.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `multi_users_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_users`	String[]	No	An array of user IDs of any valid users to be pre-selected when the menu loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears before the multi-select choices are submitted.
`max_selected_items`	Integer	No	Specifies the maximum number of items that can be selected in the menu. Minimum number is 1.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A multi-select menu in a section block showing a list of users:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick users from the list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "multi_users_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select users"
      }
    }
  }
]

Conversations list

Works with block types: Section Input

This multi-select menu will populate its options with a list of public and private channels, DMs, and MPIMs visible to the current user in the active workspace.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `multi_conversations_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_conversations`	String[]	No	An array of one or more IDs of any valid conversations to be pre-selected when the menu loads. If `default_to_current_conversation` is also supplied, `initial_conversations` will be ignored.
`default_to_current_conversation`	Boolean	No	Pre-populates the select menu with the conversation that the user was viewing when they opened the modal, if available. Default is `false`.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears before the multi-select choices are submitted.
`max_selected_items`	Integer	No	Specifies the maximum number of items that can be selected in the menu. Minimum number is 1.
`filter`	Object	No	A filter object that reduces the list of available conversations using the specified criteria.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A multi-select menu in a section block showing a list of conversations:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick conversations from the list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "multi_conversations_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select conversations"
      }
    }
  }
]

Public channels select

Works with block types: Section Input

This multi-select menu will populate its options with a list of public channels visible to the current user in the active workspace.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `multi_channels_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_channels`	String[]	No	An array of one or more IDs of any valid public channel to be pre-selected when the menu loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears before the multi-select choices are submitted.
`max_selected_items`	Integer	No	Specifies the maximum number of items that can be selected in the menu. Minimum number is 1.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A multi-select menu in a section block showing a list of channels:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick channels from the list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "multi_channels_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select channels"
      }
    }
  }
]

Number input element

Works with block types: Input

Number input elements are supported in the following app surfaces: Modals

This input elements accepts both whole and decimal numbers. For example, 0.25, 5.5, and -10 are all valid input values. Decimal numbers are only allowed when is_decimal_allowed is equal to true.

An example of a Number input element

Fields

Fields	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `number_input`.
`is_decimal_allowed`	Boolean	Yes	Decimal numbers are allowed if `is_decimal_allowed`= `true`, set the value to `false` otherwise.
`action_id`	String	No	An identifier for the input value when the parent modal is submitted. You can use this when you receive a `view_submission` payload to identify the value of the input element. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_value`	String	No	The initial value in the plain-text input when it is loaded.
`min_value`	String	No	The minimum value, cannot be greater than `max_value`.
`max_value`	String	No	The maximum value, cannot be less than `min_value`.
`dispatch_action_config`	Object	No	A dispatch configuration object that determines when during text input the element returns a `block_actions` payload.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown in the number input. Maximum length for the `text` in this field is 150 characters.

Example

{
"type": "input",
  "element": {
    "type": "number_input",
    "is_decimal_allowed": false,
    "action_id": "number_input-action"
  },
  "label": {
    "type": "plain_text",
    "text": "Label",
    "emoji": true
  }
}

Overflow menu element

Works with block types: Section Actions

This is like a cross between a button and a select menu - when a user clicks on this overflow button, they will be presented with a list of options to choose from. Unlike the select menu, there is no typeahead field, and the button always appears with an ellipsis ("…") rather than customisable text.

As such, it is usually used if you want a more compact layout than a select menu, or to supply a list of less visually important actions after a row of buttons. You can also specify simple URL links as overflow menu options, instead of actions.

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of an overflow element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `overflow`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`options`	Object[]	Yes	An array of up to five option objects to display in the menu.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a menu item is selected.

Example

A section block with an overflow menu:

{
  "type": "section",
  "block_id": "section 890",
  "text": {
    "type": "mrkdwn",
    "text": "This is a section block with an overflow menu."
  },
  "accessory": {
    "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"
  }
}

View an example

Plain-text input element

Works with block types: Input

A plain-text input, similar to the HTML <input> tag, creates a field where a user can enter freeform data. It can appear as a single-line field or a larger text area using the multiline flag.

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

Plain-text input elements are supported in the following app surfaces: Home tabs Messages Modals

To use plain-text input elements in modals, you will need to make some changes to prepare your app. Read about preparing your app for modals.

An example of a plain-text element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `plain_text_input`.
`action_id`	String	Yes	An identifier for the input value when the parent modal is submitted. You can use this when you receive a `view_submission` payload to identify the value of the input element. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_value`	String	No	The initial value in the plain-text input when it is loaded.
`multiline`	Boolean	No	Indicates whether the input will be a single line (`false`) or a larger textarea (`true`). Defaults to `false`.
`min_length`	Integer	No	The minimum length of input that the user must provide. If the user provides less, they will receive an error. Maximum value is 3000.
`max_length`	Integer	No	The maximum length of input that the user can provide. If the user provides more, they will receive an error.
`dispatch_action_config`	Object	No	A dispatch configuration object that determines when during text input the element returns a `block_actions` payload.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown in the plain-text input. Maximum length for the `text` in this field is 150 characters.

Example

An input block containing a plain-text input element.

{
  "type": "input",
  "block_id": "input123",
  "label": {
    "type": "plain_text",
    "text": "Label of input"
  },
  "element": {
    "type": "plain_text_input",
    "action_id": "plain_input",
    "placeholder": {
      "type": "plain_text",
      "text": "Enter some plain text"
    }
  }
}

Radio button group element

Works with block types: Section Actions Input

A radio button group that allows a user to choose one item from a list of possible options.

Radio buttons are supported in the following app surfaces: Home tabs Modals Messages

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a radio button element

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `radio_buttons`.
`action_id`	String	Yes	An identifier for the action triggered when the radio button group is changed. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`options`	Object[]	Yes	An array of option objects. A maximum of 10 options are allowed.
`initial_option`	Object	No	An option object that exactly matches one of the options within `options`. This option will be selected when the radio button group initially loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after clicking one of the radio buttons in this element.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.

Example

A section block containing a set of radio buttons:

{
  "type": "modal",
  "title": {
    "type": "plain_text",
    "text": "My App",
    "emoji": true
  },
  "submit": {
    "type": "plain_text",
    "text": "Submit",
    "emoji": true
  },
  "close": {
    "type": "plain_text",
    "text": "Cancel",
    "emoji": true
  },
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "plain_text",
        "text": "Check out these rad radio buttons"
      },
      "accessory": {
        "type": "radio_buttons",
        "action_id": "this_is_an_action_id",
        "initial_option": {
          "value": "A1",
          "text": {
            "type": "plain_text",
            "text": "Radio 1"
          }
        },
        "options": [
          {
            "value": "A1",
            "text": {
              "type": "plain_text",
              "text": "Radio 1"
            }
          },
          {
            "value": "A2",
            "text": {
              "type": "plain_text",
              "text": "Radio 2"
            }
          }
        ]
      }
    }
  ]
}

View an example

Select menu element

A select menu, just as with a standard HTML <select> tag, creates a drop down menu with a list of options for a user to choose. The select menu also includes type-ahead functionality, where a user can type a part or all of an option string to filter the list.

To use interactive components, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

An example of a select menu element

There are different types of select menu elements that depend on different data sources for their lists of options:

Select menu of static options
Select menu of external data source
Select menu of users
Select menu of conversations
Select menu of public channels

Select menu of static options

Works with block types: Section Actions Input

This is the simplest form of select menu, with a static list of options passed in when defining the element.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `static_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`options`	Object[]	Yes	An array of option objects. Maximum number of options is 100. If `option_groups` is specified, this field should not be.
`option_groups`	Object[]	No	An array of option group objects. Maximum number of option groups is 100. If `options` is specified, this field should not be.
`initial_option`	Object	No	A single option that exactly matches one of the options within `options` or `option_groups`. This option will be selected when the menu initially loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a menu item is selected.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A static select menu

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick an item from the dropdown list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "static_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select an item"
      },
      "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"
        }
      ]
    }
  }
]

Select menu of external data source

Works with block types: Section Actions Input

This select menu will load its options from an external data source, allowing for a dynamic list of options.

Setup

If you don't have Socket Mode enabled, you'll need to configure your app to use this menu type:

Go to your app's settings page and select Interactivity & Shortcuts from the sidebar.
Add a URL to the Options Load URL under Select Menus.
Save changes.

Each time a select menu of this type is opened or the user starts typing in the typeahead field, we'll send a request to your specified URL. Your app should return an HTTP 200 OK response, along with an application/json post body with an object containing either an options array, or an option_groups array. Here's an example response:

{
  "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"
    }
  ]
}

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `external_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_option`	Object	No	A single option that exactly matches one of the options within the `options` or `option_groups` loaded from the external data source. This option will be selected when the menu initially loads.
`min_query_length`	Integer	No	When the typeahead field is used, a request will be sent on every character change. If you prefer fewer requests or more fully ideated queries, use the `min_query_length` attribute to tell Slack the fewest number of typed characters required before dispatch. The default value is `3`.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a menu item is selected.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A select menu in a section block with an external data source:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick an item from the dropdown list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "external_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select an item"
      },
      "min_query_length": 3
    }
  }
]

Select menu of users

Works with block types: Section Actions Input

This select menu will populate its options with a list of Slack users visible to the current user in the active workspace.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `users_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_user`	String	No	The user ID of any valid user to be pre-selected when the menu loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a menu item is selected.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A select menu in a section block showing a list of users:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick a user from the dropdown list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "users_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select an item"
      }
    }
  }
]

Select menu of conversations

Works with block types: Section Actions Input

This select menu will populate its options with a list of public and private channels, DMs, and MPIMs visible to the current user in the active workspace.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `conversations_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_conversation`	String	No	The ID of any valid conversation to be pre-selected when the menu loads. If `default_to_current_conversation` is also supplied, `initial_conversation` will take precedence.
`default_to_current_conversation`	Boolean	No	Pre-populates the select menu with the conversation that the user was viewing when they opened the modal, if available. Default is `false`.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a menu item is selected.
`response_url_enabled`	Boolean	No	This field only works with menus in input blocks in modals. When set to `true`, the `view_submission` payload from the menu's parent view will contain a `response_url`. This `response_url` can be used for message responses. The target conversation for the message will be determined by the value of this select menu.
`filter`	Object	No	A filter object that reduces the list of available conversations using the specified criteria.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A select menu in a section block showing a list of conversations:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick a conversation from the dropdown list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "conversations_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select an item"
      }
    }
  }
]

Select menu of public channels

Works with block types: Section Actions Input

This select menu will populate its options with a list of public channels visible to the current user in the active workspace.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `channels_select`.
`action_id`	String	Yes	An identifier for the action triggered when a menu option is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_channel`	String	No	The ID of any valid public channel to be pre-selected when the menu loads.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a menu item is selected.
`response_url_enabled`	Boolean	No	This field only works with menus in input blocks in modals. When set to `true`, the `view_submission` payload from the menu's parent view will contain a `response_url`. This `response_url` can be used for message responses. The target channel for the message will be determined by the value of this select menu.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the menu. Maximum length for the `text` in this field is 150 characters.

Example

A select menu in a section block showing a list of channels:

[
  {
    "type": "section",
    "block_id": "section678",
    "text": {
      "type": "mrkdwn",
      "text": "Pick a channel from the dropdown list"
    },
    "accessory": {
      "action_id": "text1234",
      "type": "channels_select",
      "placeholder": {
        "type": "plain_text",
        "text": "Select an item"
      }
    }
  }
]

Time picker element

Works with block types: Section Actions Input

An element which allows selection of a time of day.

On desktop clients, this time picker will take the form of a dropdown list with free-text entry for precise choices. On mobile clients, the time picker will use native time picker UIs.

To use interactive components like this, you will need to make some changes to prepare your app. Read our guide to enabling interactivity.

Fields

Field	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `timepicker`.
`action_id`	String	Yes	An identifier for the action triggered when a time is selected. You can use this when you receive an interaction payload to identify the source of the action. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_time`	String	No	The initial time that is selected when the element is loaded. This should be in the format `HH:mm`, where `HH` is the 24-hour format of an hour (00 to 23) and `mm` is minutes with leading zeros (00 to 59), for example `22:25` for 10:25pm.
`confirm`	Object	No	A confirm object that defines an optional confirmation dialog that appears after a time is selected.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown on the timepicker. Maximum length for the `text` in this field is 150 characters.

Example

A section block containing a timepicker element, with the initial time set to 11:40am:

{
  "type": "section",
  "block_id": "section1234",
  "text": {
    "type": "mrkdwn",
    "text": "Pick a date for the deadline."
  },
  "accessory": {
    "type": "timepicker",
    "action_id": "timepicker123",
    "initial_time": "11:40",
    "placeholder": {
      "type": "plain_text",
      "text": "Select a time"
    }
  }
}

View an example

URL input element

Works with block types: Input

A URL input element, similar to the Plain-text input element, creates a single line field where a user can enter a URL.

URL input elements are supported in the following app surfaces: Modals

Fields

Fields	Type	Required?	Description
`type`	String	Yes	The type of element. In this case `type` is always `url_text_input`.
`action_id`	String	Yes	An identifier for the input value when the parent modal is submitted. You can use this when you receive a `view_submission` payload to identify the value of the input element. Should be unique among all other `action_id`s in the containing block. Maximum length for this field is 255 characters.
`initial_value`	String	No	The initial value in the URL input when it is loaded.
`dispatch_action_config`	Object	No	A dispatch configuration object that determines when during text input the element returns a `block_actions` payload.
`focus_on_load`	Boolean	No	Indicates whether the element will be set to auto focus within the `view object`. Only one element can be set to `true`. Defaults to `false`.
`placeholder`	Object	No	A `plain_text` only text object that defines the placeholder text shown in the URL input. Maximum length for the `text` in this field is 150 characters.

Example

An input block containing a URL-text input element.

{
  "type": "input",
  "element": {
    "type": "url_text_input",
    "action_id": "url_text_input-action"
  },
  "label": {
    "type": "plain_text",
    "text": "Label",
    "emoji": true
  }
}

Was this page helpful?