Repository: speee/jsx-slack
Pull request #200 (2020-10-07 07:52:10)

Allow <Input> and input components in <Home>
Now `<Home>` container accepts `input` layout block generated from `<Input>` and input components, as same as `<Modal>`

We also have modified documentation to rename "input components for modal" just into "input components".

### `dispatchAction` prop

By this update, `dispatchAction` prop will be added to `<Input>` and input components, for dispatching [`block_actions` payload](https://api.slack.com/reference/interaction-payloads/block-actions).

```jsx
<Home>
  <Input label="Search by keyword..." dispatchAction />
</Home>
```

```json
{
  "type": "home",
  "blocks": [
    {
      "type": "input",
      "label": {
        "type": "plain_text",
        "text": "Search by keyword...",
        "emoji": true
      },
      "optional": true,
      "dispatch_action": true,
      "element": {
        "type": "plain_text_input"
      }
    }
  ]
}
```

[<img width="673" src="https://user-images.githubusercontent.com/3993388/95302422-e4c63180-08bc-11eb-8f60-be8cb15f6371.png">](https://app.slack.com/block-kit-builder/T8GV9S0P7#%7B%22type%22:%22home%22,%22blocks%22:%5B%7B%22type%22:%22input%22,%22label%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Search%20by%20keyword...%22,%22emoji%22:true%7D,%22optional%22:true,%22dispatch_action%22:true,%22element%22:%7B%22type%22:%22plain_text_input%22%7D%7D%5D%7D)

> [Slack is explaining an added `dispatch_actions` field at the documentation](https://api.slack.com/reference/block-kit/blocks#input), but we have to notice that _Block Kit Builder would deny plural._
>
> <img width="414" src="https://user-images.githubusercontent.com/3993388/95302182-8dc05c80-08bc-11eb-9998-4dc7e6afb7e7.png">



Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index da60846..8ea0f94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,15 +2,17 @@
 
 ## [Unreleased]
 
-### Added
-
-- Docs: [`jsxFragmentFactory` compiler option for TypeScript v4](https://github.com/speee/jsx-slack/blob/master/docs/how-to-setup-jsx-transpiler.md#typescript) ([#173](https://github.com/speee/jsx-slack/issues/173), [#191](https://github.com/speee/jsx-slack/pull/191))
-
 ### Changed
 
+- `<Input>` and input components are available in home tab container `<Home>` ([#195](https://github.com/speee/jsx-slack/issues/195), [#200](https://github.com/speee/jsx-slack/pull/200))
 - Allow using `<RadioButtonGroup>` and `<CheckboxGroup>` in message container `<Blocks>` ([#196](https://github.com/speee/jsx-slack/issues/196), [#197](https://github.com/speee/jsx-slack/pull/197))
 - Upgrade dependent packages to the latest version ([#191](https://github.com/speee/jsx-slack/pull/191), [#198](https://github.com/speee/jsx-slack/pull/198))
 
+### Added
+
+- `dispatchAction` prop for `<Input>` layout block and input components ([#200](https://github.com/speee/jsx-slack/pull/200))
+- Docs: [`jsxFragmentFactory` compiler option for TypeScript v4](https://github.com/speee/jsx-slack/blob/master/docs/how-to-setup-jsx-transpiler.md#typescript) ([#173](https://github.com/speee/jsx-slack/issues/173), [#191](https://github.com/speee/jsx-slack/pull/191))
+
 ## v2.4.0 - 2020-07-30
 
 ### Added
diff --git a/README.md b/README.md
index 7af5952..7b5e5a2 100644
--- a/README.md
+++ b/README.md
@@ -244,7 +244,7 @@ By using jsx-slack, you can build a template with piling up Block Kit blocks by
   - [Block elements](docs/block-elements.md)
     - [Interactive components](docs/block-elements.md#interactive-components)
     - [Composition objects](docs/block-elements.md#composition-objects)
-    - [Input components for modal](docs/block-elements.md#input-components-for-modal)
+    - [Input components](docs/block-elements.md#input-components)
 
 * **[HTML-like formatting](docs/html-like-formatting.md)**
 * **[About escape and exact mode](docs/about-escape-and-exact-mode.md)**
diff --git a/demo/schema.js b/demo/schema.js
index 38431f2..f63cf72 100644
--- a/demo/schema.js
+++ b/demo/schema.js
@@ -116,7 +116,22 @@ const schema = {
       callbackId: null,
       externalId: null,
     },
-    children: [...commonKnownBlocks, 'Input', 'input'],
+    children: [
+      ...commonKnownBlocks,
+      'Input',
+      'input',
+      'Textarea',
+      'textarea',
+      'Select',
+      'select',
+      'ExternalSelect',
+      'UsersSelect',
+      'ConversationsSelect',
+      'ChannelsSelect',
+      'DatePicker',
+      'RadioButtonGroup',
+      'CheckboxGroup',
+    ],
   },
 
   // Block Kit components
@@ -367,7 +382,7 @@ const schema = {
     children: markupHTML,
   },
 
-  // Input components for modal
+  // Input components
   Textarea: {
     attrs: {
       ...inputComponentAttrs,
diff --git a/docs/block-containers.md b/docs/block-containers.md
index e971150..19b052d 100644
--- a/docs/block-containers.md
+++ b/docs/block-containers.md
@@ -44,7 +44,7 @@ api.views.open({
 })
 ```
 
-In addition to [layout blocks](layout-blocks.md), `<Modal>` container can place [input components](block-elements.md#input-components-for-modal) as the children directly. So you can compose blocks for modal with predictable JSX template inspired from HTML form.
+In addition to [layout blocks](layout-blocks.md), `<Modal>` container can place [input components](block-elements.md#input-components) as the children directly. So you can compose blocks for modal with predictable JSX template inspired from HTML form.
 
 ```jsx
 /** @jsx JSXSlack.h */
@@ -105,6 +105,8 @@ api.views.publish({
 
 [<img src="./preview-btn.svg" width="240" />](https://speee-jsx-slack.netlify.app/#bkb:jsx:eJyz8cjPTbXjUlCwCU5NLsnMz7MLT81JBooplOQr5FYqZACZijb6MEkuG32wBgD3vRIW)
 
+As same as `<Modal>`, `<Home>` can place [input components](block-elements.md#input-components) as the direct child.
+
 ### Props
 
 - `privateMetadata` (optional): An optional string that can be found in payloads of some interactive events Slack app received. (3000 characters maximum) [By setting function, you can use the custom transformer to serialize hidden values set up via `<Input type="hidden">`](block-elements.md#custom-transformer).
diff --git a/docs/block-elements.md b/docs/block-elements.md
index c4b5f95..b4ecc61 100644
--- a/docs/block-elements.md
+++ b/docs/block-elements.md
@@ -95,9 +95,9 @@ By defining `multiple` attribute, you also can provide [the selectable menu from
 - `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 for modal](#input-components-for-modal)
+#### As [an input component](#input-components)
 
-In `<Modal>` container, select-like components will work as [the input component for modal](#input-components-for-modal) by passing suitable props such as required `label` prop. Thereby it would allow natural templating like as HTML form.
+In `<Modal>` container, select-like components will work as [input components](#input-components) by passing suitable props such as required `label` prop. Thereby it would allow natural templating like as HTML form.
 
 ```jsx
 <Modal title="Programming survey">
@@ -134,12 +134,13 @@ The above JSX means exactly same as following usage of [`<Input>` layout block](
 
 <!-- prettier-ignore-end -->
 
-##### Props for modal's input
+##### 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](layout-blocks.md#input).
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### <a name="option" id="option"></a> `<Option>`: Menu item
 
@@ -211,12 +212,13 @@ It requires setup JSON entry URL in your Slack app. [Learn about external source
 - `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 modal's input
+##### 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](layout-blocks.md#input).
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### <a name="select-fragment" id="select-fragment"></a> `<SelectFragment>`: Generate options for external source
 
@@ -261,12 +263,13 @@ A select menu with options consisted of users in the current workspace.
 - `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 modal's input
+##### 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](layout-blocks.md#input).
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### <a name="conversations-select" id="conversations-select"></a> [`<ConversationsSelect>`: Select menu with conversations list](https://api.slack.com/reference/messaging/block-elements#conversation_select)
 
@@ -291,12 +294,13 @@ A select menu with options consisted of any type of conversations in the current
 - `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 modal's input
+##### 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](layout-blocks.md#input).
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) 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`
@@ -340,12 +344,13 @@ A select menu with options consisted of public channels in the current workspace
 - `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 modal's input
+##### 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](layout-blocks.md#input).
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) 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._
 
 ### <a name="overflow" id="overflow"></a> [`<Overflow>`: Overflow menu](https://api.slack.com/reference/messaging/block-elements#overflow)
@@ -399,9 +404,9 @@ An easy way to let the user selecting any date is using `<DatePicker>` component
 - `initialDate` / `value` (optional): An initially selected date. It allows `YYYY-MM-DD` formatted string, UNIX timestamp in millisecond, and JavaScript [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
 - `confirm` (optional): [Confirmation dialog object] or [`<Confirm>` element](#confirm) to show confirmation dialog.
 
-#### As [an input component for modal](#input-components-for-modal)
+#### As [an input component](#input-components)
 
-`<DatePicker>` also will work as [the input component for modal](#input-components-for-modal), and may place as the children of `<Modal>` by passing required props.
+`<DatePicker>` also will work as [input components](#input-components), and may place as the children of `<Modal>` by passing required props.
 
 ```jsx
 <Modal title="My App">
@@ -411,12 +416,13 @@ An easy way to let the user selecting any date is using `<DatePicker>` component
 
 [<img src="./preview-btn.svg" width="240" />](https://speee-jsx-slack.netlify.app/#bkb:jsx:eJyz8c1PScxRKMksyUm1VfKtVHAsKFCy41JQsHFJLEkNyEzOTi1SyElMSs2xVQKJKCnkJeYCVaaA2fp2XDb6YBPsAFtcFsA=)
 
-##### Props for modal's input
+##### 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](layout-blocks.md#input).
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### <a name="checkbox-group" id="checkbox-group"></a> [`<CheckboxGroup>`: Checkbox group](https://api.slack.com/reference/block-kit/block-elements#checkboxes)
 
@@ -469,7 +475,7 @@ A container for grouping checkboxes.
 - `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](#confirm) to show confirmation dialog.
 
-#### As [an input component for modal](#input-components-for-modal)
+#### As [an input component](#input-components)
 
 ```jsx
 <Modal title="Quick survey">
@@ -496,12 +502,13 @@ A container for grouping checkboxes.
 
 [<img src="./preview-btn.svg" width="240" />](https://speee-jsx-slack.netlify.app/#bkb:jsx:eJyFks1OwzAQhO99ipHvkHvkuBJIICQqQCBxdpotseLEwT9t0qfHcRqgh6oXr76xx17tmG9MJTW88poK9hbUtoELdk8jEyuA39e0bUozPFoT-igAqirYzpjKsYSdbOlM0LIkXbDPWnpUBqMJOMjOwxtQlHbGwteEXlo_QnURlMODVZUc1_MNlr6DslRFEEn47QJ7qUN8rgz2iywTd6kir2U7SznPlrMXrL06HiUTr1NBnui6ycutYeKDhpsNDZgI-bRed7rgasXE-1SQJ7puMnFA1rF5F3hJeALuWqn1shVZiWfyaAlNZw7zQAkxgghx1u0tz9Rymmf_zOdd_FFKOklPXR9ibmM_TYAGz1L2p-ZOwS90IfU1QyZWPEu_TPwAz_3ERA==)
 
-##### Props for modal's input
+##### 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](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.
+- `dispatchAction` (optional): By setting `true`, the input element will dispatch [`block_actions` payload](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### <a name="checkbox" id="checkbox"></a> `<Checkbox>`: Checkbox
 
@@ -591,9 +598,9 @@ A container for grouping radio buttons.
 - `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](#confirm) to show confirmation dialog.
 
-#### As [an input component for modal](#input-components-for-modal)
+#### As [an input component](#input-components)
 
-In `<Modal>` container, `<RadioButtonGroup>` can place as `<Modal>`'s direct child by passing `label` prop as same as the input component for modal.
+In `<Modal>` and `<Home>` container, `<RadioButtonGroup>` as an input component can place as the direct child of container by passing `label` prop.
 
 ```jsx
 <Modal title="Preferences" close="Cancel">
@@ -621,12 +628,13 @@ In `<Modal>` container, `<RadioButtonGroup>` can place as `<Modal>`'s direct chi
 
 [<img src="./preview-btn.svg" width="240" />](https://speee-jsx-slack.netlify.app/#bkb:jsx:eJydUttKxDAQfd-vGPIBW8EnpQ2sCiKyrrhfMG0mSyBNajIt5O_NplW6rL74FOZcck4u9d4rtMCGLTXiPZCmQK6jKKCzPmbsEfNohdwA1B-ojH8Ymb17Dn4cMgZgsSXbiDfPRpsO2XgXRWGMaoS7hh329CuxtDgSs3EnQNCBPsdcJ4HXcGGANgEOw3Y2TmjHbERr5_lsM4FUHmQB1s3X6pkF2FkLNJHjuAB17DMvy6FyUqYDdWQmUovuvISUK_e0ratZPUdVq6y_0-PY9xjST4MnNDbBgl6WOJJT-TLUWgHIsNvD3f3tzdJEYfpXEa-1kAetr-QXQHnugr64YWTgNJRDtL1h8b3V4VVAJTd1VT6V_AJi8MGk)
 
-##### Props for modal's input
+##### 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](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.
+- `dispatchAction` (optional): By setting `true`, the input element will dispatch [`block_actions` payload](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### <a name="radio-button" id="radio-button"></a> `<RadioButton>`: Radio button
 
@@ -763,11 +771,11 @@ jsx-slack will disable automatic parsing by default even if you were not used `<
 
 - `verbatim`: (optional): A boolean prop whether to disable automatic parsing for links, conversation names, and mentions by Slack.
 
-## Input components for modal
+## Input components
 
-**Input components** are available only for [`<Modal>`](block-containers.md#modal). These include a part of [interactive components](#interactive-components) and dedicated components such as [`<Input>`](#input) and [`<Textarea>`](#textarea).
+**Input components** are available in [`<Modal>`](block-containers.md#modal) and [`<Home>`](block-containers.md#home). These include a part of [interactive components](#interactive-components) and dedicated components such as [`<Input>`](#input) and [`<Textarea>`](#textarea).
 
-All of input components **must be placed as the children of `<Modal>`, and defining `label` prop is required.** (for [`<Input>` layout block](layout-blocks.md#input))
+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](layout-blocks.md#input))
 
 The list of input components is following:
 
@@ -784,7 +792,7 @@ The list of input components is following:
 
 ### <a name="input" id="input"></a> [`<Input>`: Plain-text input element](https://api.slack.com/reference/block-kit/block-elements#input)
 
-`<Input>` component is for placing a single-line input form within `<Modal>`. It can place as children of `<Modal>` directly.
+`<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.
 
@@ -805,6 +813,7 @@ It has an interface similar to `<input>` HTML element and `<input>` intrinsic HT
 - `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](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 - `value` (optional): An initial value for plain-text input.
 - `maxLength` (optional): The maximum number of characters allowed for the input element. It must up to 3000 character.
 - `minLength` (optional): The minimum number of characters allowed for the input element.
diff --git a/docs/jsx-components-for-block-kit.md b/docs/jsx-components-for-block-kit.md
index b81d92d..2cbd0f4 100644
--- a/docs/jsx-components-for-block-kit.md
+++ b/docs/jsx-components-for-block-kit.md
@@ -19,7 +19,7 @@
 - [**`<Context>`**: Context Block](layout-blocks.md#context)
 - [**`<File>`**: File Block](layout-blocks.md#file) (Only for messaging)
 - [**`<Call>`**: Call Block](layout-blocks.md#call) (Only for messaging)
-- [**`<Input>`**: Input Block](layout-blocks.md#input) (Only for modal)
+- [**`<Input>`**: Input Block](layout-blocks.md#input) (Only for modal and home tab)
 
 ## **[Block elements](block-elements.md)**
 
@@ -47,7 +47,7 @@
 - [**`<Confirm>`**: Confirmation dialog](block-elements.md#confirm)
 - [**`<Mrkdwn>`**: Text composition object for `mrkdwn` type](block-elements.md#mrkdwn)
 
-### **[Input components for modal](block-elements.md#input-components-for-modal)**
+### **[Input components](block-elements.md#input-components)**
 
 - [**`<Input>`**: Plain-text input element](block-elements.md#input)
   - [**`<Input type="hidden">`**: Store hidden values to modal](block-elements.md#input-hidden)
diff --git a/docs/layout-blocks.md b/docs/layout-blocks.md
index b619b5f..8290a9e 100644
--- a/docs/layout-blocks.md
+++ b/docs/layout-blocks.md
@@ -221,9 +221,9 @@ Display a card of the call that was registered to Slack workspace. [Learn about
 - `callId` (**required**): A string of registered call's ID.
 - `id` / `blockId` (optional): A string of unique identifier of block.
 
-## <a name="input" id="input"></a> [`<Input>`: Input Block](https://api.slack.com/reference/messaging/blocks#input) (Only for modal)
+## <a name="input" id="input"></a> [`<Input>`: Input Block](https://api.slack.com/reference/messaging/blocks#input) (Only for modal and home tab)
 
-Display one of interactive components for input to collect information from users. _This block is only for [`<Modal>` container](block-containers.md#modal)._
+Display one of interactive components for input to collect information from users. _This block is only for [`<Modal>`](block-containers.md#modal) and [`<Home>`](block-containers.md#home) container._
 
 If you want to use `<Input>` as layout block, you have to place one of [available interactive components](#available-interactive-components) as a child.
 
@@ -243,6 +243,7 @@ If you want to use `<Input>` as layout block, you have to place one of [availabl
 - `id` / `blockId` (optional): A string of unique identifier of block.
 - `title`/ `hint` (optional): Specify a helpful text appears under the element. `title` is alias to `hint` prop for keeping HTML compatibility.
 - `required` (optional): A boolean prop to specify whether any value must be filled when user confirms modal. `false` by default for HTML compatibility, and _notice that it is different from Slack's default._
+- `dispatchAction` (optional): By setting `true`, the input element will dispatch [`block_actions` payload](https://api.slack.com/reference/interaction-payloads/block-actions) when used this.
 
 ### Available interactive components
 
@@ -255,11 +256,11 @@ If you want to use `<Input>` as layout block, you have to place one of [availabl
 - [`<CheckboxGroup>`](block-elements.md#checkbox-group)
 - [`<RadioButtonGroup>`](block-elements.md#radio-button-group)
 
-> \* Some components have unique properties only for [input components](block-elements.md#input-components-for-modal). You cannot define them to the interactive component wrapped in `<Input>` layout block _(TypeScript would throw error while compile)_.
+> \* Some components have unique properties only for [input components](block-elements.md#input-components). You cannot define them to the interactive component wrapped in `<Input>` layout block _(TypeScript would throw error while compile)_.
 
 ### Note
 
-**We usually recommend to use [input components for modal](block-elements.md#input-components-for-modal) directly** instead of using `<Input>` layout block. These, included [`<Input>`](block-elements.md#input) and [`<Textarea>`](block-elements.md#textarea), can place to modal directly by passing props compatible with `<Input>` block, and you may write JSX template with familiar HTML form style.
+**We usually recommend to use [input components](block-elements.md#input-components) directly** instead of using `<Input>` layout block. These, included [`<Input>`](block-elements.md#input) and [`<Textarea>`](block-elements.md#textarea), can place to modal directly by passing props compatible with `<Input>` block, and you may write JSX template with familiar HTML form style.
 
 ```jsx
 <Modal title="My App">
diff --git a/src/block-kit/container/Home.tsx b/src/block-kit/container/Home.tsx
index 763a207..6dd5291 100644
--- a/src/block-kit/container/Home.tsx
+++ b/src/block-kit/container/Home.tsx
@@ -6,10 +6,12 @@ import {
   createComponent,
   createElementInternal,
 } from '../../jsx'
+import { Select } from '../elements/Select'
+import { Textarea } from '../input/Textarea'
 import { Divider } from '../layout/Divider'
 import { Header } from '../layout/Header'
 import { Image } from '../layout/Image'
-import { Input } from '../layout/Input'
+import { Input, knownInputs } from '../layout/Input'
 import { Section } from '../layout/Section'
 import {
   PrivateMetadataTransformer,
@@ -22,7 +24,7 @@ interface HomeProps {
   children: JSXSlack.ChildNodes
 
   /**
-   * An identifier for this modal to recognize it in various events from Slack.
+   * An identifier for this view to recognize it in various events from Slack.
    */
   callbackId?: string
 
@@ -70,9 +72,19 @@ const HomeBlocks = generateBlocksContainer({
     divider: true,
     header: true,
     image: true,
+    input: true,
     section: generateSectionValidator(),
   },
-  aliases: { header: Header, hr: Divider, img: Image, section: Section },
+  aliases: {
+    header: Header,
+    hr: Divider,
+    img: Image,
+    input: Input,
+    section: Section,
+    select: Select,
+    textarea: Textarea,
+  },
+  typesToCheckMissingLabel: knownInputs,
 })
 
 /**
@@ -87,8 +99,20 @@ const HomeBlocks = generateBlocksContainer({
  * - `<Header>` (`<header>`)
  * - `<Context>`
  * - `<Actions>`
+ * - `<Input>` (`<input>`)
+ *
+ * And these input components (Require defining `label` prop):
  *
- * And you can also use `<Input type="hidden">` to store private metadata.
+ * - `<Input label="...">` (`<input label="...">`)
+ * - `<Textarea label="...">` (`<textarea label="...">`)
+ * - `<Select label="...">` (`<select label="...">`)
+ * - `<ExternalSelect label="...">`
+ * - `<UsersSelect label="...">`
+ * - `<ConversationsSelect label="...">`
+ * - `<ChannelsSelect label="...">`
+ * - `<DatePicker label="...">`
+ * - `<CheckboxGroup label="...">`
+ * - `<RadioButtonGroup label="...">`
  *
  * @example
  * ```jsx
@@ -116,13 +140,15 @@ export const Home = createComponent<HomeProps, View>('Home', (props) => {
       if (JSXSlack.isValidElement(child)) {
         const { type, props: childProps } = child.$$jsxslack
 
-        if (
-          (type === Input || type === 'input') &&
-          childProps.type === 'hidden'
-        ) {
-          pmObject = pmObject || {}
-          pmObject[childProps.name] = childProps.value
-          return reducer
+        if (type === Input || type === 'input') {
+          if (childProps.type === 'hidden') {
+            pmObject = pmObject || {}
+            pmObject[childProps.name] = childProps.value
+            return reducer
+          }
+
+          // Just ignore submit type within the home tab
+          if (childProps.type === 'submit') return reducer
         }
       }
 
diff --git a/src/block-kit/elements/utils.ts b/src/block-kit/elements/utils.ts
index 79bca1d..0aa1e68 100644
--- a/src/block-kit/elements/utils.ts
+++ b/src/block-kit/elements/utils.ts
@@ -40,8 +40,8 @@ export interface ResponsableUrlProps {
    * In short, turning on means providing an easy way to respond into selected.
    *
    * @remarks
-   * _This prop is only available in the input component for `<Modal>`, and
-   * cannot coexist with enabled `multiple` prop._
+   * _This prop is only available in the input component, and cannot coexist
+   * with enabled `multiple` prop._
    */
   responseUrlEnabled?: boolean
 }
diff --git a/src/block-kit/input/Textarea.tsx b/src/block-kit/input/Textarea.tsx
index 756e72c..05e4ff6 100644
--- a/src/block-kit/input/Textarea.tsx
+++ b/src/block-kit/input/Textarea.tsx
@@ -13,8 +13,8 @@ export interface TextareaProps extends Omit<InputTextProps, 'type'> {}
  * {@link https://api.slack.com/reference/block-kit/block-elements#input a plain-text input}
  * with multiline text.
  *
- * _This component is available only in `<Modal>` container._ It should place on
- * immidiate children of `<Modal>`.
+ * _This component is not available in `<Blocks>` container._ It should place on
+ * immidiate children of `<Modal>` or `<Home>`.
  *
  * ```jsx
  * <Modal title="My App">
diff --git a/src/block-kit/layout/Actions.ts b/src/block-kit/layout/Actions.ts
index 7ad0fad..cd918f6 100644
--- a/src/block-kit/layout/Actions.ts
+++ b/src/block-kit/layout/Actions.ts
@@ -30,6 +30,7 @@ export const availableActionTypes = [
   'overflow',
   'radio_buttons',
   'static_select',
+  'timepicker',
   'users_select',
 ] as const
 
@@ -43,14 +44,14 @@ const actionTypeValidators: Record<string, (action: Action) => void> = {
   channels_select: (element: any) => {
     if (element.response_url_enabled)
       throw new JSXSlackError(
-        '<ChannelsSelect responseUrlEnabled> is available only in the usage of the input component for <Modal>.',
+        '<ChannelsSelect responseUrlEnabled> is available only in the usage of input components.',
         element
       )
   },
   conversations_select: (element: any) => {
     if (element.response_url_enabled)
       throw new JSXSlackError(
-        '<ConversationsSelect responseUrlEnabled> is available only in the usage of the input component for <Modal>.',
+        '<ConversationsSelect responseUrlEnabled> is available only in the usage of input components.',
         element
       )
   },
diff --git a/src/block-kit/layout/Input.tsx b/src/block-kit/layout/Input.tsx
index 5cb4084..187d890 100644
--- a/src/block-kit/layout/Input.tsx
+++ b/src/block-kit/layout/Input.tsx
@@ -1,5 +1,5 @@
 /** @jsx createElementInternal */
-import { InputBlock } from '@slack/types'
+import { InputBlock as _InputBlock } from '@slack/types'
 import { JSXSlackError } from '../../error'
 import {
   JSXSlack,
@@ -15,12 +15,21 @@ import { ActionProps } from '../elements/utils'
 import { resolveTagName } from '../utils'
 import { LayoutBlockProps } from './utils'
 
+type InputBlock = _InputBlock & { dispatch_action?: boolean }
+
 interface InputLayoutProps extends LayoutBlockProps {
   children: JSXSlack.Node
 
   /** The label string for the interactive element. */
   label: string
 
+  /**
+   * By setting `true`, the input element will dispatch
+   * {@link https://api.slack.com/reference/interaction-payloads/block-actions `block_actions` payload}
+   * when used this.
+   */
+  dispatchAction?: boolean
+
   /** Set a helpful text appears under the element. */
   hint?: string
 
@@ -43,19 +52,27 @@ interface InputComponentBaseProps extends Omit<InputLayoutProps, 'children'> {
    * A string of unique identifier for the implicit parent `input` layout block.
    *
    * @remarks
-   * _This is only working in input components for `<Modal>` enabled by defining
-   * `label` prop._
+   * _This is only working in input components enabled by defining `label` prop._
    */
   blockId?: string
 
+  /**
+   * By setting `true`, the input element will dispatch
+   * {@link https://api.slack.com/reference/interaction-payloads/block-actions `block_actions` payload}
+   * when used this.
+   *
+   * @remarks
+   * _This is only working in input components enabled by defining `label` prop._
+   */
+  dispatchAction?: boolean
+
   /**
    * Set `label` prop for the implicit parent `input` layout block, to display
    * the label string.
    *
    * @remarks
-   * Please notice that this prop is **always required** in input components for
-   * `<Modal>`, and _**never** in interactive elements for `<Section>` and
-   * `<Actions>`._
+   * Please notice that this prop is **always required** in input components,
+   * and _**never** in interactive elements for `<Section>` and `<Actions>`._
    */
   label: string
 
@@ -63,8 +80,7 @@ interface InputComponentBaseProps extends Omit<InputLayoutProps, 'children'> {
    * Set a helpful text appears under the element.
    *
    * @remarks
-   * _This is only working in input components for `<Modal>` enabled by defining
-   * `label` prop._
+   * _This is only working in input components enabled by defining `label` prop._
    */
   hint?: string
 
@@ -72,8 +88,7 @@ interface InputComponentBaseProps extends Omit<InputLayoutProps, 'children'> {
    * Set whether any value must be filled when user confirms modal.
    *
    * @remarks
-   * _This is only working in input components for `<Modal>` enabled by defining
-   * `label` prop._
+   * _This is only working in input components enabled by defining `label` prop._
    *
    * HTML-compatible `required` prop means reversed `optional` field in Slack
    * API. _Please notice jsx-slack's default `required: false` is different from
@@ -114,10 +129,10 @@ export interface InputTextProps extends InputComponentBaseProps, ActionProps {
   /**
    * The _initial_ value of the input element.
    *
-   * This prop would rather similar to `defaultValue` than it in React. A
-   * defined value would be filled to the element only when the modal was
-   * opened. {@link https://api.slack.com/methods/views.update `views.update`}
-   * cannot update the text changed by user even if changed this prop.
+   * This prop would rather similar to `defaultValue` than `value` in React. A
+   * defined value would be filled to the element only when the view was opened.
+   * {@link https://api.slack.com/methods/views.update `views.update`} cannot
+   * update the text changed by user even if changed this prop.
    */
   value?: string
 }
@@ -137,7 +152,7 @@ interface InputHiddenProps {
    * A value of private metadata JSON to store.
    *
    * It must be able to serializable into JSON (except while using custom
-   * transformer in the parent `<Modal>`).
+   * transformer in the container).
    * */
   value: any
 }
@@ -178,6 +193,7 @@ export const knownInputs = [
   'plain_text_input',
   'radio_buttons',
   'static_select',
+  'timepicker',
   'users_select',
 ]
 
@@ -228,6 +244,8 @@ export const wrapInInput = <T extends object>(
       label: plainText(props.label),
       hint: hint ? plainText(hint) : undefined,
       optional: !props.required,
+      dispatch_action:
+        props.dispatchAction !== undefined ? !!props.dispatchAction : undefined,
       element,
     }
   }
@@ -237,14 +255,11 @@ export const wrapInInput = <T extends object>(
 
 /**
  * `<Input>` has various usages: Input component for single text element,
- * helpers for the parent `<Modal>`, and Slack-style
+ * helpers for the container, and Slack-style
  * {@link https://api.slack.com/reference/messaging/blocks#input|`input` layout block}.
  *
- * _This component is basically available only in `<Modal>` container._ It
- * should place on immidiate children of `<Modal>`.
- *
- * An exception is `<Input type="hidden">`. It can use also in `<Home>`
- * container to store private metadata.
+ * _This component is not available in `<Blocks>` container._ It should place on
+ * immidiate children of `<Modal>` or `<Home>`.
  *
  * ---
  *
@@ -292,7 +307,7 @@ export const wrapInInput = <T extends object>(
  *
  * ---
  *
- * ### Set the label of submit button
+ * ### Set the label of submit button for modal
  *
  * `<Input type="submit" />` can set the label of submit button for the current
  * modal. It's meaning just an alias into `submit` prop of `<Modal>`, but JSX
diff --git a/src/block-kit/layout/Section.ts b/src/block-kit/layout/Section.ts
index 414d715..0a26032 100644
--- a/src/block-kit/layout/Section.ts
+++ b/src/block-kit/layout/Section.ts
@@ -24,7 +24,7 @@ const sectionAccessoryValidators = {
   channels_select: (element) => {
     if (element.response_url_enabled)
       throw new JSXSlackError(
-        '<ChannelsSelect responseUrlEnabled> is available only in the usage of the input component for <Modal>.',
+        '<ChannelsSelect responseUrlEnabled> is available only in the usage of input components.',
         element
       )
   },
@@ -32,7 +32,7 @@ const sectionAccessoryValidators = {
   conversations_select: (element) => {
     if (element.response_url_enabled)
       throw new JSXSlackError(
-        '<ConversationsSelect responseUrlEnabled> is available only in the usage of the input component for <Modal>.',
+        '<ConversationsSelect responseUrlEnabled> is available only in the usage of input components.',
         element
       )
   },
@@ -47,6 +47,7 @@ const sectionAccessoryValidators = {
   overflow: () => {},
   radio_buttons: () => {},
   static_select: () => {},
+  timepicker: () => {},
   users_select: () => {},
 
   // Extra validators to throw better error
diff --git a/src/jsx.ts b/src/jsx.ts
index 60ff195..01555f9 100644
--- a/src/jsx.ts
+++ b/src/jsx.ts
@@ -433,7 +433,7 @@ export namespace JSXSlack {
 
       /**
        * A HTML-compatible alias into `<Input>` layout block, input component,
-       * and helpers for modal.
+       * and helpers for some surfaces.
        */
       input: InputProps
 


Test patch:
diff --git a/test/block-kit/block-elements/input-components-for-modal.tsx b/test/block-kit/block-elements/input-components.tsx
similarity index 94%
rename from test/block-kit/block-elements/input-components-for-modal.tsx
rename to test/block-kit/block-elements/input-components.tsx
index dcc2816..ddeee88 100644
--- a/test/block-kit/block-elements/input-components-for-modal.tsx
+++ b/test/block-kit/block-elements/input-components.tsx
@@ -23,7 +23,7 @@ import {
 
 beforeEach(() => JSXSlack.exactMode(false))
 
-describe('Input components for modal', () => {
+describe('Input components', () => {
   it('wraps input-compatible block elements in <Input> block when passed label prop', () => {
     for (const Compatible of [
       (props) => (
@@ -50,13 +50,19 @@ describe('Input components for modal', () => {
       expect(
         JSXSlack(
           <Modal title="test">
-            <Compatible id="test" label="Test" name="name" title="foobar" />
+            <Compatible
+              id="test"
+              label="Test"
+              name="name"
+              title="foobar"
+              dispatchAction
+            />
           </Modal>
         )
       ).toStrictEqual(
         JSXSlack(
           <Modal title="test">
-            <Input blockId="test" label="Test" hint="foobar">
+            <Input blockId="test" label="Test" hint="foobar" dispatchAction>
               <Compatible actionId="name" />
             </Input>
           </Modal>
@@ -120,6 +126,18 @@ describe('Input components for modal', () => {
         ).blocks
       ).toStrictEqual([expected]))
 
+    it('accepts dispatchAction prop', () => {
+      expect(<Input label="input" />).not.toHaveProperty('dispatch_action')
+      expect(<Input label="input" dispatchAction />).toHaveProperty(
+        'dispatch_action',
+        true
+      )
+      expect(<Input label="input" dispatchAction={false} />).toHaveProperty(
+        'dispatch_action',
+        false
+      )
+    })
+
     it('allows using HTML-compatible <input> element', () =>
       expect(
         JSXSlack(
diff --git a/test/block-kit/container-components.tsx b/test/block-kit/container-components.tsx
index 93caea1..a6aa6fb 100644
--- a/test/block-kit/container-components.tsx
+++ b/test/block-kit/container-components.tsx
@@ -1,7 +1,6 @@
 /** @jsx JSXSlack.h */
 import { PlainTextElement, View } from '@slack/types'
 import {
-  Actions,
   Blocks,
   Call,
   Escape,
@@ -298,6 +297,28 @@ describe('Container components', () => {
       ).toStrictEqual(viewWithOptions)
     })
 
+    it('accepts input layout block and input components', () => {
+      const inputLayout: any = (
+        <Home>
+          <Input label="Select">
+            <Select>
+              <Option value="test">test</Option>
+            </Select>
+          </Input>
+        </Home>
+      )
+      expect(inputLayout.blocks[0].type).toBe('input')
+
+      const inputComponent: any = (
+        <Home>
+          <Select label="Select">
+            <Option value="test">test</Option>
+          </Select>
+        </Home>
+      )
+      expect(inputComponent.blocks[0].type).toBe('input')
+    })
+
     it('accepts <Input type="hidden"> to store private metadata', () => {
       expect(
         JSXSlack(
@@ -332,6 +353,14 @@ describe('Container components', () => {
       ).toBe('foo=bar&abc=def')
     })
 
+    it('ignores <Input type="modal">', () => {
+      expect(
+        <Home>
+          <Input type="submit" value="test" />
+        </Home>
+      ).toStrictEqual({ type: 'home', blocks: [] })
+    })
+
     it('throws error when <Home> has unexpected element', () => {
       expect(() =>
         JSXSlack(
@@ -356,18 +385,6 @@ describe('Container components', () => {
           </Home>
         )
       ).toThrow()
-
-      expect(() =>
-        JSXSlack(
-          <Home>
-            <Input label="Select">
-              <Select>
-                <Option value="test">test</Option>
-              </Select>
-            </Input>
-          </Home>
-        )
-      ).toThrow()
     })
 
     it('ignores invalid literal values to keep compatibillity with v1', () => {