yhatt · yhatt · Feb 10, 2020 · Feb 7, 2020 · Feb 7, 2020 · Feb 7, 2020
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -29,7 +29,6 @@ commands:
       - save_cache:
           key: dependencies-{{ .Environment.CI_CACHE_KEY }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}-{{ .Branch }}
           paths:
-            - node_modules
             - ~/.cache/yarn
 
       - run:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## [Unreleased]
 
+### Added
+
+- [`<CheckboxGroup>`](https://github.com/speee/jsx-slack/blob/master/docs/block-elements.md#checkbox-group) and [`<Checkbox>`](https://github.com/speee/jsx-slack/blob/master/docs/block-elements.md#checkbox) interactive component ([#108](https://github.com/speee/jsx-slack/issues/108), [#109](https://github.com/speee/jsx-slack/pull/109))
+- [Redirect the content of `<small>` element into `description`](https://github.com/speee/jsx-slack/blob/master/docs/block-elements.md#redirect-small-into-description) in `<Checkbox>` and `<RadioButton>` ([#109](https://github.com/speee/jsx-slack/pull/109))
+
 ### Changed
 
 - Upgrade dependent packages to the latest version ([#107](https://github.com/speee/jsx-slack/pull/107))

diff --git a/demo/schema.js b/demo/schema.js
@@ -9,6 +9,7 @@ const blockInteractiveComponents = [
   'Overflow',
   'DatePicker',
   'RadioButtonGroup',
+  'CheckboxGroup',
 
   // HTML compatible
   'button',
@@ -102,6 +103,7 @@ const schema = {
       'ChannelsSelect',
       'DatePicker',
       'RadioButtonGroup',
+      'CheckboxGroup',
     ],
   },
 
@@ -177,6 +179,7 @@ const schema = {
       'ChannelsSelect',
       'DatePicker',
       'RadioButtonGroup',
+      'CheckboxGroup',
     ],
   },
   input: {
@@ -197,6 +200,7 @@ const schema = {
       'ChannelsSelect',
       'DatePicker',
       'RadioButtonGroup',
+      'CheckboxGroup',
     ],
   },
 
@@ -313,6 +317,18 @@ const schema = {
     children: ['RadioButton'],
   },
   RadioButton: { attrs: { value: null, description: null }, children: [] },
+  CheckboxGroup: {
+    attrs: {
+      values: null,
+      ...blockInteractiveCommonAttrs,
+      ...inputComponentAttrs,
+    },
+    children: ['Checkbox'],
+  },
+  Checkbox: {
+    attrs: { value: null, checked: [], description: null },
+    children: ['Mrkdwn', 'small', ...markupHTML],
+  },
 
   // Composition objects
   Confirm: {
@@ -385,6 +401,7 @@ const schema = {
       t => t !== 's' && t !== 'strike' && t !== 'del'
     ),
   },
+  small: { attrs: {}, children: markupHTML },
   span: { attrs: {}, children: markupHTML },
   strike: {
     attrs: {},

diff --git a/docs/block-elements.md b/docs/block-elements.md
@@ -379,6 +379,135 @@ An easy way to let the user selecting any date is using `<DatePicker>` component
 - `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.
 
+### <a name="checkbox-group" id="checkbox-group"></a> [`<CheckboxGroup>`: Checkbox group](https://api.slack.com/reference/block-kit/block-elements#checkboxes) (Only for modal and home tab)
+
+A container for grouping checkboxes. _This component is only for [`<Modal>`](block-containers.md#modal) and [`<Home>`](block-containers.md#home) container. It cannot use in [`<Blocks>`](block-containers.md#blocks) container for messaging._
+
+```jsx
+<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>
+```
+
+[<img src="https://raw.githubusercontent.com/speee/jsx-slack/master/docs/preview-btn.svg?sanitize=true" width="240" />](<https://api.slack.com/tools/block-kit-builder?mode=appHome&view=%7B%22type%22%3A%22home%22%2C%22blocks%22%3A%5B%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*ToDo%20List*%22%2C%22verbatim%22%3Atrue%7D%2C%22accessory%22%3A%7B%22type%22%3A%22checkboxes%22%2C%22action_id%22%3A%22todo%22%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*Learn%20about%20Slack%20app*%20(%3C!date%5E1582470000%5E%7Bdate%7D%7CFebruary%2023rd%2C%202020%3E)%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22xxx-0001%22%2C%22description%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22_XXX-0001%3A%20*High*_%22%2C%22verbatim%22%3Atrue%7D%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*Learn%20about%20jsx-slack*%20(%3C!date%5E1582729200%5E%7Bdate%7D%7CFebruary%2026th%2C%202020%3E)%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22xxx-0002%22%2C%22description%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22_XXX-0002%3A%20*Medium*_%22%2C%22verbatim%22%3Atrue%7D%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22~*Prepare%20development%20environment*%20(%3C!date%5E1582210800%5E%7Bdate%7D%7CFebruary%2020th%2C%202020%3E)~%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22xxx-0003%22%2C%22description%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22_XXX-0003%3A%20*Medium*_%22%2C%22verbatim%22%3Atrue%7D%7D%5D%2C%22initial_options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22~*Prepare%20development%20environment*%20(%3C!date%5E1582210800%5E%7Bdate%7D%7CFebruary%2020th%2C%202020%3E)~%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22xxx-0003%22%2C%22description%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22_XXX-0003%3A%20*Medium*_%22%2C%22verbatim%22%3Atrue%7D%7D%5D%7D%7D%5D%7D>)
+
+#### 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): [`<Confirm>` element](#confirm) to show confirmation dialog.
+
+#### As [an input component for modal](#input-components-for-modal)
+
+```jsx
+<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>
+```
+
+[<img src="https://raw.githubusercontent.com/speee/jsx-slack/master/docs/preview-btn.svg?sanitize=true" width="240" />](https://api.slack.com/tools/block-kit-builder?mode=modal&view=%7B%22type%22%3A%22modal%22%2C%22title%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22Quick%20survey%22%2C%22emoji%22%3Atrue%7D%2C%22submit%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22Submit%22%2C%22emoji%22%3Atrue%7D%2C%22blocks%22%3A%5B%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22foods%22%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22What%20do%20you%20want%20to%20eat%20for%20the%20party%20in%20this%20Friday%3F%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Afalse%2C%22element%22%3A%7B%22type%22%3A%22checkboxes%22%2C%22action_id%22%3A%22foods%22%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22Burger%20%3Ahamburger%3A%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22burger%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22Pizza%20%3Apizza%3A%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22pizza%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22Tex-Mex%20taco%20%3Ataco%3A%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22taco%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22Sushi%20%3Asushi%3A%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22sushi%22%7D%2C%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22Others%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22others%22%2C%22description%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22_Let%20me%20know%20in%20the%20below%20form._%22%2C%22verbatim%22%3Atrue%7D%7D%5D%7D%7D%2C%7B%22type%22%3A%22input%22%2C%22block_id%22%3A%22others%22%2C%22label%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22What%20do%20you%20want%3F%22%2C%22emoji%22%3Atrue%7D%2C%22optional%22%3Atrue%2C%22element%22%3A%7B%22type%22%3A%22plain_text_input%22%2C%22action_id%22%3A%22others%22%7D%7D%5D%7D)
+
+##### Props for modal's input
+
+- `label` (**required**): The label string for the group.
+- `id` / `blockId` (optional): A string of unique identifier of [`<Input>` layout block](layout-blocks.md#input).
+- `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.
+
+### <a name="checkbox" id="checkbox"></a> `<Checkbox>`: Checkbox
+
+A checkbox item. It must place in the children of `<CheckboxGroup>`.
+
+It supports raw [mrkdwn format](https://api.slack.com/reference/surfaces/formatting) / [HTML-like formatting](./html-like-formatting.md) in the both of contents and `description` property.
+
+```jsx
+<Checkbox
+  value="checkbox"
+  description={
+    <Fragment>
+      XXX-1234 - <i>by Yuki Hattori</i>
+    </Fragment>
+  }
+>
+  <b>Checkbox item</b>: foobar
+</Checkbox>
+```
+
+[<img src="https://raw.githubusercontent.com/speee/jsx-slack/master/docs/preview-btn.svg?sanitize=true" width="240" />](https://api.slack.com/tools/block-kit-builder?mode=appHome&view=%7B%22type%22%3A%22home%22%2C%22blocks%22%3A%5B%7B%22type%22%3A%22actions%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22checkboxes%22%2C%22options%22%3A%5B%7B%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*Checkbox%20item*%3A%20foobar%22%2C%22verbatim%22%3Atrue%7D%2C%22value%22%3A%22checkbox%22%2C%22description%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22XXX-1234%20-%20_by%20Yuki%20Hattori_%22%2C%22verbatim%22%3Atrue%7D%7D%5D%7D%5D%7D%5D%7D)
+
+> :information_source: [Links and mentions through `<a>` tag](https://github.com/speee/jsx-slack/blob/master/docs/html-like-formatting.md#links) 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. If it's not defined, the initial state is following `values` property in the parent `<CheckboxGroup>`.
+
+#### 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.
+
+```jsx
+<Checkbox value="checkbox">
+  <b>Checkbox item</b>: foobar
+  <small>
+    XXX-1234 - <i>by Yuki Hattori</i>
+  </small>
+</Checkbox>
+```
+
 ### <a name="radio-button-group" id="radio-button-group"></a> [`<RadioButtonGroup>`: Radio button group](https://api.slack.com/reference/block-kit/block-elements#radio) (Only for modal and home tab)
 
 A container for grouping radio buttons. It provides easy control of the selected option through similar interface to [`<Select>`](#select).
@@ -412,7 +541,7 @@ _This component is only for [`<Modal>`](block-containers.md#modal) and [`<Home>`
 #### Props
 
 - `name` / `actionId` (optional): An identifier for the action.
-- `value` (optional): A value for initial selected option. It must choose value from defined `<RadioButton>` elements in children.
+- `value` (optional): A value for initially selected option. It must match to `value` property in one of `<RadioButton>` elements in children.
 - `confirm` (optional): [`<Confirm>` element](#confirm) to show confirmation dialog.
 
 #### As [an input component for modal](#input-components-for-modal)
@@ -429,17 +558,13 @@ In `<Modal>` container, `<RadioButtonGroup>` can place as `<Modal>`'s direct chi
     value="all"
     required
   >
-    <RadioButton
-      value="all"
-      description="Notify all received events every time."
-    >
+    <RadioButton value="all">
       All events
+      <small>Notify all received events every time.</small>
     </RadioButton>
-    <RadioButton
-      value="summary"
-      description="Send a daily summary at AM 9:30 every day."
-    >
+    <RadioButton value="summary">
       Daily summary
+      <small>Send a daily summary at AM 9:30 every day.</small>
     </RadioButton>
     <RadioButton value="off">Off</RadioButton>
   </RadioButtonGroup>
@@ -458,10 +583,35 @@ In `<Modal>` container, `<RadioButtonGroup>` can place as `<Modal>`'s direct chi
 
 ### <a name="radio-button" id="radio-button"></a> `<RadioButton>`: Radio button
 
+An item of the radio button. It must place in the children of `<RadioButtonGroup>`.
+
+_Unlike checkbox, the content of text and description cannot style via [mrkdwn format](https://api.slack.com/reference/surfaces/formatting) and [HTML elements](./html-like-formatting.md) because Slack only allows plain text in the radio button._
+
 #### Props
 
-- `value` (**required**): A string value to send to Slack App when choose option.
-- `description` (optional): A description text for current radio button. It can see with faded color in just below main label.
+- `value` (**required**): A string value to send to Slack App when choosing the radio button.
+- `description` (optional): A description text for the current radio button. It can see with faded color just below the main label. `<RadioButton>` prefers this prop than redirection by `<small>`.
+
+#### Redirect `<small>` into description
+
+`<RadioButton>` allows `<small>` element for ergonomic templating, to redirect the text content into description when `description` prop is not defined.
+
+For example, below 2 elements are meaning exactly the same radio button.
+
+```jsx
+<RadioButtonGroup>
+  {/* Define description through prop */}
+  <RadioButton value="radio" description="Description">
+    Radio button
+  </RadioButton>
+
+  {/* Define description through <small> element */}
+  <RadioButton value="radio">
+    Radio button
+    <small>Description</small>
+  </RadioButton>
+</RadioButtonGroup>
+```
 
 ## [Composition objects](https://api.slack.com/reference/messaging/composition-objects)
 
@@ -546,6 +696,8 @@ Setting `verbatim` to `false` will tell Slack to auto-convert links, conversatio
 
 [<img src="https://raw.githubusercontent.com/speee/jsx-slack/master/docs/preview-btn.svg?sanitize=true" width="240" />](https://api.slack.com/tools/block-kit-builder?mode=message&blocks=%5B%7B%22type%22%3A%22section%22%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22https%3A%2F%2Fexample.com%2F%22%2C%22verbatim%22%3Afalse%7D%7D%2C%7B%22type%22%3A%22section%22%2C%22fields%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%23general%22%2C%22verbatim%22%3Afalse%7D%5D%7D%2C%7B%22type%22%3A%22context%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22%40here%22%2C%22verbatim%22%3Afalse%7D%2C%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22Hello!%22%2C%22verbatim%22%3Atrue%7D%5D%7D%2C%7B%22type%22%3A%22actions%22%2C%22elements%22%3A%5B%7B%22type%22%3A%22button%22%2C%22text%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22Button%22%2C%22emoji%22%3Atrue%7D%2C%22confirm%22%3A%7B%22title%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22Commit%20your%20action%22%2C%22emoji%22%3Atrue%7D%2C%22text%22%3A%7B%22type%22%3A%22mrkdwn%22%2C%22text%22%3A%22*%40here*%20Are%20you%20sure%3F%22%2C%22verbatim%22%3Afalse%7D%2C%22confirm%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22Yes%2C%20please%22%2C%22emoji%22%3Atrue%7D%2C%22deny%22%3A%7B%22type%22%3A%22plain_text%22%2C%22text%22%3A%22Cancel%22%2C%22emoji%22%3Atrue%7D%7D%7D%5D%7D%5D)
 
+<!-- INFO: We have no example in checkbox due to meaningless: Slack will be ignored links and mentions in checkbox. -->
+
 #### 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](https://api.slack.com/reference/surfaces/formatting#why_you_should_consider_disabling_automatic_parsing).
@@ -572,6 +724,7 @@ The list of input components is following:
 - [`<ConversationsSelect>`](#conversations-select)
 - [`<ChannelsSelect>`](#channels-select)
 - [`<DatePicker>`](#date-picker)
+- [`<CheckboxGroup>`](#checkbox-group)
 - [`<RadioButtonGroup>`](#radio-button-group)
 
 ### <a name="input" id="input"></a> [`<Input>`: Plain-text input element](https://api.slack.com/reference/block-kit/block-elements#input)

diff --git a/docs/html-like-formatting.md b/docs/html-like-formatting.md
@@ -8,7 +8,7 @@ jsx-slack has HTML-compatible JSX elements to format messages. It might be verbo
 
 _Using HTML elements is not mandatory. You may also use [a regular mrkdwn syntax][mrkdwn] to format if necessary._
 
-[mrkdwn]: https://api.slack.com/docs/message-formatting
+[mrkdwn]: https://api.slack.com/reference/surfaces/formatting
 
 ## Format text style
 

diff --git a/docs/jsx-components-for-block-kit.md b/docs/jsx-components-for-block-kit.md
@@ -35,6 +35,8 @@
 - [**`<Overflow>`**: Overflow menu](block-elements.md#overflow)
   - [**`<OverflowItem>`**: Menu item in overflow menu](block-elements.md#overflow-item)
 - [**`<DatePicker>`**: Select date from calendar](block-elements.md#date-picker)
+- [**`<CheckboxGroup>`**: Checkbox group](block-elements.md#checkbox-group) (Only for modal and home tab)
+  - [**`<Checkbox>`**: Checkbox](block-elements.md#checkbox)
 - [**`<RadioButtonGroup>`**: Radio button group](block-elements.md#radio-button-group) (Only for modal and home tab)
   - [**`<RadioButton>`**: Radio button](block-elements.md#radio-button)
 

diff --git a/docs/layout-blocks.md b/docs/layout-blocks.md
@@ -28,7 +28,7 @@ Display a simple text message. You have to specify the content as children. It a
 
 ### Accessory
 
-A one of accessory component may include as the children of `<Section>`. The defined element will show in side-by-side of text.
+A one of accessory component may include as the children of `<Section>`. The defined element will show in side-by-side or just below of text.
 
 ```jsx
 <Blocks>
@@ -52,6 +52,7 @@ A one of accessory component may include as the children of `<Section>`. The def
 - [`<ChannelsSelect>`](block-elements.md#channels-select)
 - [`<Overflow>`](block-elements.md#overflow)
 - [`<DatePicker>`](block-elements.md#date-picker)
+- [`<CheckboxGroup>`](block-elements.md#checkbox-group) (Only for [`<Modal>`](block-containers.md#modal) and [`<Home>`](block-containers.md#home) container)
 - [`<RadioButtonGroup>`](block-elements.md#radio-button-group) (Only for [`<Modal>`](block-containers.md#modal) and [`<Home>`](block-containers.md#home) container)
 
 ### <a name="field" id="field"></a> `<Field>`: Fields for section block
@@ -218,6 +219,7 @@ If you want to use `<Input>` as layout block, you have to place one of [availabl
 - [`<ConversationsSelect>`](block-elements.md#conversations-select)
 - [`<ChannelsSelect>`](block-elements.md#channels-select)
 - [`<DatePicker>`](block-elements.md#date-picker)
+- [`<CheckboxGroup>`](block-elements.md#checkbox-group)
 - [`<RadioButtonGroup>`](block-elements.md#radio-button-group)
 
 ### Note

diff --git a/src/block-kit/Actions.tsx b/src/block-kit/Actions.tsx
@@ -16,14 +16,15 @@ interface ActionsProps extends BlockComponentProps {
 
 export const actionTypes = [
   'button',
-  'static_select',
-  'external_select',
-  'users_select',
-  'conversations_select',
   'channels_select',
-  'overflow',
+  'checkboxes',
+  'conversations_select',
   'datepicker',
+  'external_select',
+  'overflow',
   'radio_buttons',
+  'static_select',
+  'users_select',
 ] as const
 
 export const Actions: JSXSlack.FC<ActionsProps> = props => {