Top » JSX components for Block Kit » Block elements

Block elements

Slack provides some block elements that may include in layout blocks. e.g. interactive components to exchange information with Slack app.

Interactive components

`<Button>`: Button element

A simple button to send action to registered Slack App, or open external URL. <button> intrinsic HTML element also works as well.

<Blocks>
  <Actions>
    <Button actionId="action" value="value" style="primary">
      Action button
    </Button>
    <Button url="https://example.com/">Link to URL</Button>
    <Button actionId="close" value="close" style="danger" aria-label="Close">
      ❌
    </Button>
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
value (optional): A string value to send to Slack App when clicked button.
url (optional): URL to load when clicked button.
style (optional): Select the color scheme of the button from primary and danger.
accessibilityLabel / aria-label (optional): A string label for setting an accessible name of the button. This label will be read out by screen readers. (Up to 75 characters)
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog. If the confirmation object has not defined style prop, the style for confirm button may be inherited from the assigned button.

`<WorkflowButton>`: Workflow button element (Only for messaging)

Similar to <Button>, but for running a link trigger with customizable inputs. This component is available only for <Blocks> container.

<Blocks>
  <Actions>
    <WorkflowButton
      actionId="action"
      style="primary"
      workflow={{
        trigger: {
          url: 'https://slack.com/shortcuts/Ft0123ABC456/321...zyx',
          customizable_input_parameters: [
            {
              name: 'input_parameter_a',
              value: 'Value for input param A',
            },
            {
              name: 'input_parameter_b',
              value: 'Value for input param B',
            },
          ],
        },
      }}
    >
      Run Workflow
    </WorkflowButton>
  </Actions>
</Blocks>

Props

workflow (required): A raw workflow object that contains details about the workflow that will run when the button is clicked.
name / actionId (optional): An identifier for the action.
style (optional): Select the color scheme of the button from primary and danger.
accessibilityLabel / aria-label (optional): A string label for setting an accessible name of the button. This label will be read out by screen readers. (Up to 75 characters)

`<Select>`: Select menu with static options

A menu element with static options passed by <Option> or <Optgroup>. It has a interface similar to <select> HTML element. In fact, <select> intrinsic HTML element works as well.

<Blocks>
  <Actions>
    <Select actionId="rating" placeholder="Rate it!">
      <Option value="5">5 {':star:'.repeat(5)}</Option>
      <Option value="4">4 {':star:'.repeat(4)}</Option>
      <Option value="3">3 {':star:'.repeat(3)}</Option>
      <Option value="2">2 {':star:'.repeat(2)}</Option>
      <Option value="1">1 {':star:'.repeat(1)}</Option>
    </Select>
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
value (optional): A value of item to show initially. It must choose defined value from <Option> elements in children. It can pass multiple string values by array when multiple is enabled.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

Multiple select

By defining multiple attribute, you also can provide the selectable menu from multiple options with an appearance is similar to button or text input. The same goes for other select-like components.

<Blocks>
  <Section>
    What kind of dogs do you love? :dog:
    <Select
      actionId="dogs"
      multiple
      placeholder="Choose favorite dog(s)"
      value={['labrador', 'golden_retriver']}
    >
      <Option value="labrador">Labrador</Option>
      <Option value="german_shepherd">German Shepherd</Option>
      <Option value="golden_retriver">Golden Retriever</Option>
      <Option value="bulldog">Bulldog</Option>
    </Select>
  </Section>
</Blocks>

⚠️ Slack does not allow to place the multi-select menu in Actions block. So jsx-slack throws error if you're trying to use multiple attribute in the children of <Actions>.

Props for multiple select

multiple (optional): A boolean value that shows whether multiple options can be selected.
maxSelectedItems (optional): A maximum number of items to allow selected.

As an input component

By passing suitable props such as required label prop, select-like components will work as input components well. Thereby it would allow natural templating like as HTML form.

<Modal title="Programming survey">
  <Select
    label="Language"
    name="language"
    title="Pick language you want to learn."
    required
  >
    <Option value="javascript">JavaScript</Option>
    <Option value="python">Python</Option>
    <Option value="java">Java</Option>
    <Option value="c-sharp">C#</Option>
    <Option value="php">PHP</Option>
  </Select>
</Modal>

The above JSX means exactly same as following usage of <Input> layout block:

<Modal title="Programming survey">
  <Input label="Language" title="Pick language you want to learn." required>
    <Select actionId="language">
      ...
    </Select>
  </Input>
</Modal>

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<Option>`: Menu item

Define an item for <Select>. <option> intrinsic HTML element works as well.

Props

value (optional): A string value to send to Slack App when choose item. Use its content string as value if omitted.
selected (optional): A boolean value to indicate initially selected option(s). It will work only when the parent <Select> did not define value prop.
description (optional): A string value for the secondary description label of the item. The description appears next to the item label in small gray text. It must up to 75 characters.

`<Optgroup>`: Group of menu items

Define a group for <Select>. <optgroup> intrinsic HTML element works as well.

<Blocks>
  <Actions>
    <Select actionId="action" placeholder="Action...">
      <Optgroup label="Search with">
        <Option value="search_google">Google</Option>
        <Option value="search_bing">Bing</Option>
        <Option value="search_duckduckgo">DuckDuckGo</Option>
      </Optgroup>
      <Optgroup label="Share to">
        <Option value="share_facebook">Facebook</Option>
        <Option value="share_twitter">Twitter</Option>
      </Optgroup>
    </Select>
  </Actions>
</Blocks>

Props

label (required): A plain text to be shown as a group name.

`<ExternalSelect>`: Select menu with external data source

You should use <ExternalSelect> if you want to provide the dynamic list from external source.

It requires setup JSON entry URL in your Slack app. Learn about external source in Slack documentation.

<Blocks>
  <Actions>
    <ExternalSelect
      actionId="category"
      placeholder="Select category..."
      minQueryLength={2}
    />
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
initialOption / value (optional): An initial option exactly matched to provided options from external source. It allows raw JSON object or <Option>. It can pass multiple options by array when multiple is enabled.
minQueryLength (optional): A length of typed characters to begin JSON request.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

Props for multiple select

multiple (optional): A boolean value that shows whether multiple options can be selected.
maxSelectedItems (optional): A maximum number of items to allow selected.

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<SelectFragment>`: Generate options for external source

You may think want to build also the data source through jsx-slack. <SelectFragment> component can create JSON object for external data source usable in <ExternalSelect>.

Example

A following is a super simple example to serve JSON for external select via express. It is using jsxslack tagged template literal.

import { jsxslack } from 'jsx-slack'
import express from 'express'

const app = express()

app.get('/external-data-source', (req, res) => {
  res.json(jsxslack`
    <SelectFragment>
      <Option value="item-a">Item A</Option>
      <Option value="item-b">Item B</Option>
      <Option value="item-c">Item C</Option>
    </SelectFragment>
  `)
})

app.listen(80)

`<UsersSelect>`: Select menu with user list

A select menu with options consisted of users in the current workspace.

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
initialUser / value (optional): The initial user ID. It can pass multiple string values by array when multiple is enabled.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

Props for multiple select

multiple (optional): A boolean value that shows whether multiple options can be selected.
maxSelectedItems (optional): A maximum number of items to allow selected.

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<ConversationsSelect>`: Select menu with conversations list

A select menu with options consisted of any type of conversations in the current workspace.

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
initialConversation / value (optional): The initial conversation ID, or a special value current. It can pass multiple string values by array when multiple is enabled.
include (optional): An array of the kind or a string of space-separated kinds, to indicate which kind of conversation types are included in list. By default, all conversation types are included.
- public: Public channel
- private: Private channel
- im: Direct message
- mpim: Group direct message
excludeExternalSharedChannels (optional): A boolean value whether to exclude external shared channels from conversations list.
excludeBotUsers (optional): A boolean value whether to exclude bot users from conversations list.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

Props for multiple select

multiple (optional): A boolean value that shows whether multiple options can be selected.
maxSelectedItems (optional): A maximum number of items to allow selected.

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.
responseUrlEnabled (optional): A boolean prop whether include extra response_urls field to the view_submission event callback, for responding into selected channel via unique URL entrypoint. This is only available in modal's input component and cannot coexist with multiple prop.

Special initial conversation: `current`

jsx-slack accepts a special value current as an initial conversation. It indicates the origin conversation that the container surface belongs to.

For example, <ConversationsSelect initialConversation="current" /> in the modal will initially select the conversation that triggered opening the modal.

<Modal title="Send a message">
  <ConversationsSelect
    label="Send to..."
    initialConversation="current"
    required
  />
  <Textarea label="Message" maxLength={280} required />
</Modal>

By previewing the above JSX through Slack Developer Tools, you can confirm its conversation is initially selected.

⚠️ current actually corresponds to default_to_current_conversation field in Slack API. It will be ignored if defined initial conversations, so multiple conversations select cannot specify current along with specific conversations.

`<ChannelsSelect>`: Select menu with channel list

A select menu with options consisted of public channels in the current workspace.

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
initialChannel / value (optional): The initial channel ID. It can pass multiple string values by array when multiple is enabled.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.irmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

Props for multiple select

multiple (optional): A boolean value that shows whether multiple options can be selected.
maxSelectedItems (optional): A maximum number of items to allow selected.

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.
responseUrlEnabled (optional): A boolean prop whether include extra response_urls field to the view_submission event callback, for responding into selected channel via unique URL entrypoint. This is only available in modal's input component and cannot coexist with multiple prop.

`<Overflow>`: Overflow menu

An overflow menu displayed as ... can access to some hidden menu items. It must contain 1 to 5 <OverflowItem> component(s).

<Blocks>
  <Actions>
    <Overflow actionId="overflow_menu">
      <OverflowItem value="share">Share</OverflowItem>
      <OverflowItem value="reply">Reply message</OverflowItem>
      <OverflowItem url="https://example.com/">Open in browser</OverflowItem>
    </Overflow>
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.

`<OverflowItem>`: Menu item in overflow menu

Props

value (optional): A string value to send to Slack App when choose item.
url (optional): URL to load when clicked button.

`<DatePicker>`: Select date from calendar

An easy way to let the user selecting any date is using <DatePicker> component.

<Blocks>
  <Actions>
    <DatePicker actionId="date_picker" initialDate={new Date()} />
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
initialDate / value (optional): An initially selected date. It allows YYYY-MM-DD formatted string, UNIX timestamp in millisecond, and JavaScript Date instance.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

As an input component

<DatePicker> also will work as input components by passing required label prop.

<Modal title="My App">
  <DatePicker label="Date" name="date" />
</Modal>

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<TimePicker>`: Select time through picker

<TimePicker> component lets users input or select a specific time easily.

<Blocks>
  <Actions>
    <TimePicker actionId="time_picker" initialTime={new Date()} />
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
placeholder (optional): A plain text to be shown at first.
initialTime / value (optional): An initially selected time. It accepts HH:mm formatted string, and a value that points out designated datetime: UNIX timestamp in millisecond or JavaScript Date instance.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

As an input component

<Home>
  <TimePicker label="Time" name="time" required dispatchAction />
</Home>

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<DateTimePicker>`: Select date and time through picker

<DateTimePicker> provides a pair of pickers for the date and the time at once.

<Blocks>
  <Actions>
    <DateTimePicker actionId="date_time_picker" initialDateTime={new Date()} />
  </Actions>
</Blocks>

Props

name / actionId (optional): An identifier for the action.
initialDateTime / value (optional): An initially selected date and time. It accepts a formatted string with ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ), UNIX timestamp in millisecond, and JavaScript Date instance.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

As an input component

<Modal title="My App">
  <DateTimePicker label="Date and time" name="datetime" required />
</Modal>

Props for an input component

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the element.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<CheckboxGroup>`: Checkbox group

A container for grouping checkboxes.

<Home>
  <Section>
    <b>ToDo List</b>
    <CheckboxGroup actionId="todo">
      <Checkbox value="xxx-0001">
        <b>Learn about Slack app</b> (
        <time dateTime={new Date(2020, 1, 24)}>{'{date}'}</time>)
        <small>
          <i>
            XXX-0001: <b>High</b>
          </i>
        </small>
      </Checkbox>
      <Checkbox value="xxx-0002">
        <b>Learn about jsx-slack</b> (
        <time dateTime={new Date(2020, 1, 27)}>{'{date}'}</time>)
        <small>
          <i>
            XXX-0002: <b>Medium</b>
          </i>
        </small>
      </Checkbox>
      <Checkbox value="xxx-0003" checked>
        <s>
          <b>Prepare development environment</b> (
          <time dateTime={new Date(2020, 1, 21)}>{'{date}'}</time>)
        </s>
        <small>
          <i>
            XXX-0003: <b>Medium</b>
          </i>
        </small>
      </Checkbox>
    </CheckboxGroup>
  </Section>
</Home>

Props

name / actionId (optional): An identifier for the action.
values (optional): An array of value for initially selected checkboxes. They must match to value property in <Checkbox> elements in children.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

As an input component

<Modal title="Quick survey">
  <CheckboxGroup
    id="foods"
    name="foods"
    label="What do you want to eat for the party in this Friday?"
    required
  >
    <Checkbox value="burger">Burger :hamburger:</Checkbox>
    <Checkbox value="pizza">Pizza :pizza:</Checkbox>
    <Checkbox value="taco">Tex-Mex taco :taco:</Checkbox>
    <Checkbox value="sushi">Sushi :sushi:</Checkbox>
    <Checkbox value="others">
      Others
      <small>
        <i>Let me know in the below form.</i>
      </small>
    </Checkbox>
  </CheckboxGroup>
  <Input type="text" id="others" name="others" label="What do you want?" />
</Modal>

Props for an input component

label (required): The label string for the group.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the group.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<Checkbox>`: Checkbox

A checkbox item. It must place in the children of <CheckboxGroup>.

It supports raw mrkdwn format / HTML-like formatting in the both of contents and description property.

<Checkbox
  value="checkbox"
  description={
    <>
      XXX-1234 - <i>by Yuki Hattori</i>
    </>
  }
>
  <b>Checkbox item</b>: foobar
</Checkbox>

ℹ️ Links and mentions through <a> tag will be ignored by Slack.

Props

value (required): A string value to send to Slack App when choosing the checkbox.
description (optional): A description string or JSX element for the current checkbox. It can see with faded color just below the main label. <Checkbox> prefers this prop than redirection by <small>.
checked (optional): A boolean value indicating the initial state of the checkbox. It will work only when the parent <CheckboxGroup> did not define values prop.

Redirect `<small>` into description

<Checkbox> allows <small> element for ergonomic templating, to redirect the content into description when description prop is not defined.

A below checkbox is meaning exactly the same as an example shown earlier.

<Checkbox value="checkbox">
  <b>Checkbox item</b>: foobar
  <small>
    XXX-1234 - <i>by Yuki Hattori</i>
  </small>
</Checkbox>

`<RadioButtonGroup>`: Radio button group

A container for grouping radio buttons.

<Home>
  <Section>
    Select the tier of our service:
    <RadioButtonGroup actionId="tier" value="free">
      <RadioButton value="free" description="$0!">
        <b>Free</b>
      </RadioButton>
      <RadioButton
        value="standard"
        description={
          <Fragment>
            $5/month, <b>and 30 days trial!</b>
          </Fragment>
        }
      >
        <b>Standard</b>
      </RadioButton>
      <RadioButton value="premium" description="$30/month">
        <b>Premium</b>
      </RadioButton>
      <RadioButton
        value="business"
        description={<i>Please contact to support.</i>}
      >
        <b>Business</b>
      </RadioButton>
    </RadioButtonGroup>
  </Section>
</Home>

Props

name / actionId (optional): An identifier for the action.
value (optional): A value for initially selected option. It must match to value property in one of <RadioButton> elements in children.
confirm (optional): Confirmation dialog object or <Confirm> element to show confirmation dialog.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

As an input component

<RadioButtonGroup> as an input component can place as the direct child of container by passing label prop.

<Modal title="Preferences" close="Cancel">
  <RadioButtonGroup
    label="Notifications"
    id="notifications"
    name="notifications"
    title="Setting a frequency of notifications by app."
    value="all"
    required
  >
    <RadioButton value="all">
      All events
      <small>Notify all received events every time.</small>
    </RadioButton>
    <RadioButton value="summary">
      Daily summary
      <small>Send a daily summary at AM 9:30 every day.</small>
    </RadioButton>
    <RadioButton value="off">Off</RadioButton>
  </RadioButtonGroup>
  <Input type="submit" value="OK" />
</Modal>

Props for an input component

label (required): The label string for the group.
id / blockId (optional): A string of unique identifier of <Input> layout block.
title/ hint (optional): Specify a helpful text appears under the group.
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this.

`<RadioButton>`: Radio button

An item of the radio button. It must place in the children of <RadioButtonGroup>.

It supports raw mrkdwn format / HTML-like formatting in the both of contents and description property.

<RadioButton value="radio" description={<i>Description</i>}>
  <b>Radio button</b>
</RadioButton>

ℹ️ Links and mentions through <a> tag will be ignored by Slack.

Props

value (required): A string value to send to Slack App when choosing the radio button.
description (optional): A description string or JSX element for the current radio button. It can see with faded color just below the main label. <RadioButton> prefers this prop than redirection by <small>.
checked (optional): A boolean value indicating the initial state of the radio button. It will work only when the parent <RadioButtonGroup> did not define value prop.

Redirect `<small>` into description

<RadioButton> allows <small> element for ergonomic templating, to redirect the text content into description when description prop is not defined.

A below radio button is meaning exactly the same as an example shown earlier.

<RadioButton value="radio">
  <b>Radio button</b>
  <small>
    <i>Description</i>
  </small>
</RadioButton>

Composition objects

`<Confirm>`: Confirmation dialog

Define confirmation dialog. Many interactive elements can open confirmation dialog when selected, by passing <Confirm> to confirm prop.

<Blocks>
  <Actions>
    <Button
      actionId="commit"
      value="value"
      confirm={
        <Confirm title="Commit your action" confirm="Yes, please" deny="Cancel">
          <b>Are you sure?</b> Please confirm your action again.
        </Confirm>
      }
    >
      Commit
    </Button>
  </Actions>
</Blocks>

You can use HTML-like formatting to the content of confirmation dialog. However, you have to be careful that Slack may ignore several formats and the content will render just in a line.

Props

title (optional): The title of confirmation dialog.
confirm (optional): A text content of the button to confirm. Slack would use the default localized label if not defined.
deny (optional): A text content of the button to cancel. Slack would use the default localized label if not defined.
style (optional): Select the color scheme of the confirm button. When not defined, jsx-slack may inherit a value from assigned component such as <Button>.
- primary: Green button on desktop, and blue text on mobile. (Slack's default if not defined)
- danger: Red button on desktop, and red text on mobile.

`<Mrkdwn>`: Text composition object for `mrkdwn` type

Generates text composition object for mrkdwn type.

You can use <Mrkdwn> component as immediate child of components which support HTML-like formatting to override mrkdwn text generated by jsx-slack.

Bypass HTML-like formatting

HTML-like formatting is a comfortable way to define Slack Block Kit surfaces with familiar syntaxes, but auto-escape for mrkdwn special chracters may interfere with the completed mrkdwn text.

You can use <Mrkdwn raw> if you want to use the raw mrkdwn string as is. It bypasses HTML-like formatting so you cannot use any JSX tags in contents.

<Blocks>
  <Section>
    <Mrkdwn raw verbatim>
      {'Hey <@U0123ABCD>, thanks for submitting your report.'}
    </Mrkdwn>
  </Section>
</Blocks>

In this case, <@U0123ABCD> will render as the mention link to specific user.

Automatic parsing (not recommended)

Setting verbatim prop to false will tell Slack to auto-convert links, conversation names, and certain mentions to be linkified and automatically parsed. If verbatim set to true Slack will skip any preprocessing.

<Blocks>
  {/* Section block */}
  <Section>
    <Mrkdwn verbatim={false}>https://example.com/</Mrkdwn>
  </Section>

  {/* Section block with fields */}
  <Section>
    <Field>
      <Mrkdwn verbatim={false}>#general</Mrkdwn>
    </Field>
  </Section>

  {/* Context block */}
  <Context>
    <Mrkdwn verbatim={false}>@here</Mrkdwn>
    Hello!
  </Context>

  {/* Confirm composition object */}
  <Actions>
    <Button
      confirm={
        <Confirm title="Commit your action" confirm="Yes, please" deny="Cancel">
          <Mrkdwn verbatim={false}>
            <b>@foobar</b> Are you sure?
          </Mrkdwn>
        </Confirm>
      }
    >
      Button
    </Button>
  </Actions>
</Blocks>

Note

Slack recommends disabling automatic parsing on text composition components and they have made it clear that they might deprecate this feature in the future. More information can be found here.

jsx-slack will disable automatic parsing by default even if you were not used <Mrkdwn> specifically. If possible, we recommend never to use <Mrkdwn> in Slack app created newly with jsx-slack.

Props

raw (optional): A boolean value whether to bypass HTML-like formatting and auto-escaping. Any JSX tags cannot use in the content if enabled.
verbatim (optional): A boolean prop whether to disable automatic parsing for links, conversation names, and mentions by Slack.

Input components

Input components are available in every containers. These include a part of interactive components and dedicated components such as <Input> and <Textarea>.

All of input components must be placed as the direct children of the container component, and defining label prop is required. (for <Input> layout block)

The list of input components is following:

<Input> / <input>
<Textarea> / <textarea>
<Select> / <select>
<ExternalSelect>
<UsersSelect>
<ConversationsSelect>
<ChannelsSelect>
<DatePicker>
<TimePicker>
<DateTimePicker>
<CheckboxGroup>
<RadioButtonGroup>

`<Input>`: Text input element

<Input> component is for placing a single-line input form within supported container. It can place as children of the container component directly.

It has an interface similar to <input> HTML element and <input> intrinsic HTML element also works as well, but must be defined label prop as mentioned above.

<Modal title="My App">
  <Input label="Title" type="text" name="title" maxLength={80} required />
  <Input label="URL" type="url" name="url" placeholder="https://..." />
  <Input label="Email" type="email" name="email" required />
  <Input label="Number" type="number" name="num" required min={1} max={100} />
</Modal>

Props

label (required): The label string for the element.
id / blockId (optional): A string of unique identifier for <Input> layout block.
name / actionId (optional): A string of unique identifier for the action.
type (optional): Choose the type of input element from text, url, email, and number. text by default.
title/ hint (optional): Specify a helpful text appears under the element.
placeholder (optional): Specify a text string appears within the content of input is empty. (150 characters maximum)
required (optional): A boolean prop to specify whether any value must be filled when user confirms modal.
dispatchAction (optional): By setting true, the input element will dispatch block_actions payload when used this. By defining interaction type(s) as space-separated string or array, you can determine when <Input> will return the payload.
- onEnterPressed: Payload is dispatched when hitting Enter key while focusing to the input component.
- onCharacterEntered: Payload is dispatched when changing input characters.
value (optional): An initial value for the input. It should be a valid string for the input type.
autoFocus (optional): Set whether the element will be set the focus automatically within the modal/home container.

Props for `<Input type="text">`

maxLength (optional): The maximum number of characters allowed for the input element. It must up to 3000 characters.
minLength (optional): The minimum number of characters allowed for the input element.

Props for `<Input type="number">`

decimal (optional): Set whether the number input element accepts decimal fractions. false by default (only accepts integer).
max (optional): The maximum value to accept for the number input.
min (optional): The minimum value to accept for the number input.

`<Input type="hidden">`: Store hidden values to the parent `<Modal>` and `<Home>`

By using <Input type="hidden">, you can assign hidden values as the private metadata JSON of the parent <Modal> or <Home> with a familiar way in HTML form.

<Modal title="modal">
  <Input type="hidden" name="foo" value="bar" />
  <Input type="hidden" name="userId" value={123} />
  <Input type="hidden" name="data" value={[{ hidden: 'value' }]} />

  <Input name="name" label="Name" />
</Modal>

The above example indicates the same modal as following:

<Modal
  title="modal"
  privateMetadata={JSON.stringify({
    foo: 'bar',
    userId: 123,
    data: [{ hidden: 'value' }],
  })}
>
  <Input name="name" label="Name" />
</Modal>

You can use hidden values by parsing JSON stored in callbacked private_metadata from Slack.

Not only <Modal> but also <Home> accepts <Input type="hidden"> for to store private metadata.

<Home>
  <Input type="hidden" name="foo" value="bar" />
  <Input type="hidden" name="userId" value={123} />
  <Input type="hidden" name="data" value={[{ hidden: 'value' }]} />
</Home>

Note

<Modal> and <Home> prefers the string defined in privateMetadata prop directly than <Input type="hidden">.

And please take care that the maximum length validation by Slack will still apply for stringified JSON. The value like string and array that cannot predict the length might over the limit of JSON string length easily (3000 characters).

The best practice is only storing the value of a pointer to reference data stored elsewhere. It's better not to store complex data as hidden value directly.

Props

type (required): Must be hidden.
name (required): The name of hidden value.
value (required): A value to store into the parent container. It must be a serializable value to JSON.

Custom transformer

If you want to store hidden values by own way, you can use a custom transformer by passing function to privateMetadata prop in the parent <Modal> and <Home>.

<Modal
  title="test"
  privateMetadata={(hidden) => hidden && new URLSearchParams(hidden).toString()}
>
  <Input type="hidden" name="A" value="foobar" />
  <Input type="hidden" name="B" value={123} />
  <Input type="hidden" name="C" value={true} />
</Modal>

In this example, the value of private_metadata field in returned payload would be A=foobar&B=123&C=true by transformation using URLSearchParams instead of JSON.stringify.

The transformer takes an argument: JSON object of hidden values or undefined when there was no hidden values. It must return the transformed string, or undefined if won't assign private metadata.

`<Input type="submit">`: Set submit button text of modal

<Input type="submit"> can set the label of submit button for the current modal. It is meaning just an alias into submit prop of <Modal>, but JSX looks like more natural HTML form.

<Modal title="Example">
  <Input name="name" label="Name" />
  <Input type="submit" value="Send" />
</Modal>

submit prop in <Modal> must not define when using <Input type="submit">. <Modal> prefers the prop defined directly.

Props

type (required): Must be submit.
value (required): A string of submit button for the current modal. (24 characters maximum)

`<Textarea>`: Plain-text input element with multiline

<Textarea> component has very similar interface to <Input> input component. An only difference is to allow multi-line input.

<Modal title="My App">
  <Textarea
    label="Tweet"
    name="tweet"
    placeholder="What’s happening?"
    maxLength={280}
    required
  />
</Modal>

<textarea> intrinsic HTML element also works as well.

Props

It accepts exactly same props as for <Input type="text"> component.

Files

block-elements.md

Latest commit

History

block-elements.md

File metadata and controls

Top » JSX components for Block Kit » Block elements

Block elements

Interactive components

Props

<WorkflowButton>: Workflow button element (Only for messaging)

Props

Props

Multiple select

Props for multiple select

As an input component

Props for an input component

<Option>: Menu item

Props

<Optgroup>: Group of menu items

Props

Props

Props for multiple select

Props for an input component

<SelectFragment>: Generate options for external source

Example

Props

Props for multiple select

Props for an input component

Props

Props for multiple select

Props for an input component

Special initial conversation: current

Props

Props for multiple select

Props for an input component

Props

<OverflowItem>: Menu item in overflow menu

Props

Props

As an input component

Props for an input component

Props

As an input component

Props for an input component

Props

As an input component

Props for an input component

Props

As an input component

Props for an input component

<Checkbox>: Checkbox

Props

Redirect <small> into description

Props

As an input component

Props for an input component

<RadioButton>: Radio button

Props

Redirect <small> into description

Props

Bypass HTML-like formatting

Automatic parsing (not recommended)

Note

Props

Input components

Props

Props for <Input type="text">

Props for <Input type="number">

<Input type="hidden">: Store hidden values to the parent <Modal> and <Home>

Note

Props

Custom transformer

<Input type="submit">: Set submit button text of modal

Props

<Textarea>: Plain-text input element with multiline

Props

Top » JSX components for Block Kit » Block elements

`<WorkflowButton>`: Workflow button element (Only for messaging)

`<Option>`: Menu item

`<Optgroup>`: Group of menu items

`<SelectFragment>`: Generate options for external source

Special initial conversation: `current`

`<OverflowItem>`: Menu item in overflow menu

`<Checkbox>`: Checkbox

Redirect `<small>` into description

`<RadioButton>`: Radio button

Redirect `<small>` into description

Props for `<Input type="text">`

Props for `<Input type="number">`

`<Input type="hidden">`: Store hidden values to the parent `<Modal>` and `<Home>`

`<Input type="submit">`: Set submit button text of modal

`<Textarea>`: Plain-text input element with multiline