Modal Components

docs/change-log/2022-10-13-new-select-menu-components.md

@@ -10,6 +10,6 @@ Four new select menu [component types](/docs/components/reference#component-obje
 * Mentionable (user *and* role) select (type `7`)
 * Channel select (type `8`)
 
-The new select menu components are defined similarly to the existing string select menu—with the exception of not including the `options` field and, within channel select menus, having the option to include a `channel_types` field. The [select menu interaction](/docs/components/reference#string-select-string-select-interaction) apps receive also contain a [`resolved` field](/docs/components/reference#string-select-select-menu-resolved-object) for the new components.
+The new select menu components are defined similarly to the existing string select menu—with the exception of not including the `options` field and, within channel select menus, having the option to include a `channel_types` field. The [select menu interaction](/docs/components/reference#user-select-examples) apps receive also contain a [`resolved` field](/docs/components/reference#user-select-examples) for the new components.
 
 More details can be found in the updated [select menu documentation](/docs/components/reference#component-object-component-types).

docs/change-log/2025-04-22-components-v2.md

@@ -3,8 +3,8 @@ title: "Introducing New Components for Messages!"
 date: "2025-04-22"
 topics:
 - "User Apps"
-- "HTTP API"
 - "Interactions"
+- "Components"
 ---
 
 We're bringing new components to messages that you can use in your apps. They allow you to have full control over the layout of your messages.

docs/change-log/2025-04-29-component-limits.md

@@ -3,8 +3,8 @@ title: "Raised Component Limits"
 date: "2025-04-29"
 topics:
 - "User Apps"
-- "HTTP API"
 - "Interactions"
+- "Components"
 ---
 
 We're removing the top level component limit and raising the limit on number of components in a message to 40 when using the [`IS_COMPONENTS_V2` message flag](/docs/resources/message#message-object-message-flags)! We're also removing the limit on the number of components in a [Container Component](/docs/components/reference#container). Legacy messages have not changed and continue to allow up to 5 action rows.

docs/components/using-modal-components.mdx

@@ -8,10 +8,6 @@ sidebar_label: Using Modal Components
 
 Modal components are a great way to collect freeform information from your users. 
 
-:::info
-Currently, only [Text Input](/docs/components/reference#text-input) fields are supported in a modal, and each one must be placed in an [Action Row](/docs/components/reference#action-row).
-:::
-
 ### Prerequisites
 
 - You must have a Discord account and be a member of the Discord Developer Portal.
@@ -21,50 +17,67 @@ Currently, only [Text Input](/docs/components/reference#text-input) fields are s
 
 ## Displaying a Modal
 
-Displaying a modal can be done in response to a [slash command](/docs/tutorials/upgrading-to-application-commands#slash-commands) or when responding to an [interaction](/docs/interactions/receiving-and-responding). When displaying a modal you'll use an [interaction response](/docs/interactions/receiving-and-responding#interaction-response-object) with the [`MODAL`](/docs/interactions/receiving-and-responding#interaction-response-object-interaction-callback-type) interaction callback type and [modal fields](/docs/interactions/receiving-and-responding#interaction-response-object-modal).
+Displaying a modal can be done in response to an [interaction](/docs/interactions/receiving-and-responding). When displaying a modal you'll use an [interaction response](/docs/interactions/receiving-and-responding#interaction-response-object) with the [`MODAL`](/docs/interactions/receiving-and-responding#interaction-response-object-interaction-callback-type) interaction callback type and [modal fields](/docs/interactions/receiving-and-responding#interaction-response-object-modal).
 
-An example of a modal with two Text Inputs:
+An example of a modal with a [String Select](/docs/components/reference#string-select) and [Text Input](/docs/components/reference#text-input) both wrapped in [Labels](/docs/components/reference#label):
 
 ```json
 {
-    "type": 9,
-    "data": {
-        "custom_id": "feedback_modal",
-        "title": "Submit Feedback",
-        "components": [
+  "type": 9,
+  "data": {
+    "custom_id": "bug_modal",
+    "title": "Bug Report",
+    "components": [
+      {
+        "type": 18,
+        "label": "What's your favorite bug?",
+        "component": {
+          "type": 3,
+          "custom_id": "bug_string_select",
+          "placeholder": "Choose...",
+          "options": [
+            {
+              "label": "Ant",
+              "value": "ant",
+              "description": "(best option)",
+              "emoji": {
+                "name": "🐜"
+              }
+            },
             {
-                "type": 1,
-                "components": [
-                    {
-                        "type": 4,
-                        "custom_id": "feedback_subject",
-                        "label": "Subject",
-                        "style": 1,
-                        "min_length": 1,
-                        "max_length": 100,
-                        "placeholder": "What is your feedback about?",
-                        "required": true
-                    }
-                ]
+              "label": "Butterfly",
+              "value": "butterfly",
+              "emoji": {
+                "name": "🦋"
+              }
             },
             {
-                "type": 1,
-                "components": [
-                    {
-                        "type": 4,
-                        "custom_id": "feedback_details",
-                        "label": "Details",
-                        "style": 2,
-                        "min_length": 10,
-                        "max_length": 1000,
-                        "placeholder": "Please provide details...",
-                        "required": true
-                    }
-                ]
+              "label": "Caterpillar",
+              "value": "caterpillar",
+              "emoji": {
+                "name": "🐛"
+              }
             }
-        ]
-    }
+          ]
+        }
+      },
+      {
+        "type": 18,
+        "label": "Why is it your favorite?",
+        "description": "Please provide as much detail as possible!",
+        "component": {
+          "type": 4,
+          "custom_id": "bug_explanation",
+          "style": 2,
+          "min_length": 1000,
+          "max_length": 4000,
+          "placeholder": "Write your explanation here...",
+          "required": true
+        }
+      }
+    ]
+  }
 }
 ```
 
-![Example of a modal with two text inputs one for subject and one for details](images/components/modal.webp)
+![Example of a modal with a String Select and a Text Input both wrapped in Labels](images/components/modal.webp)

docs/interactions/overview.mdx

@@ -49,7 +49,7 @@ A list of all message components and details on sending and receiving component
 
 ![Modals in the Discord client](images/overview-modals.webp)
 
-The only interactive component that modals can contain are [text inputs](/docs/components/reference#text-input), which allow users to fill out single-or-multi line form inputs.
+The components that modals can contain are found in the [component reference](/docs/components/reference). The data received after a modal is submitted can be found in [each component's interaction response structure](/docs/interactions/receiving-and-responding#interaction-response-object-modal).
 
 Details about creating and using modals is in the [Receiving and Responding](/docs/interactions/receiving-and-responding#interaction-response-object-modal) documentation.
 

docs/interactions/receiving-and-responding.mdx

@@ -87,6 +87,15 @@ The values in `authorizing_integration_owners` depend on the key—
 
 While the `data` field is guaranteed to be present for all [interaction types](/docs/interactions/receiving-and-responding#interaction-object-interaction-type) besides `PING`, its structure will vary. The following tables detail the inner `data` payload for each interaction type.
 
+| Interaction Type                       | Interaction Data                                                                                                                        |
+|----------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| PING (`1`)                             | N / A                                                                                                                                   |
+| APPLICATION_COMMAND (`2`)              | [Application Command Data Structure](/docs/interactions/receiving-and-responding#interaction-object-application-command-data-structure) |
+| MESSAGE_COMPONENT (`3`)                | [Message Component Data Structure](/docs/interactions/receiving-and-responding#interaction-object-message-component-data-structure)     |
+| APPLICATION_COMMAND_AUTOCOMPLETE (`4`) | [Application Command Data Structure](/docs/interactions/receiving-and-responding#interaction-object-application-command-data-structure) |
+| MODAL_SUBMIT (`5`)                     | [Modal Submit Data Structure](/docs/interactions/receiving-and-responding#interaction-object-modal-submit-data-structure)               |
+
+
 ###### Application Command Data Structure
 
 :::info
@@ -118,10 +127,17 @@ Sent in `APPLICATION_COMMAND` and `APPLICATION_COMMAND_AUTOCOMPLETE` interaction
 
 ###### Modal Submit Data Structure
 
-| Field      | Type                                                                       | Description                                                                             |
-|------------|----------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
-| custom_id  | string                                                                     | [`custom_id`](/docs/components/reference#anatomy-of-a-component-custom-id) of the modal |
-| components | array of [message components](/docs/components/reference#component-object) | Values submitted by the user                                                            |
+| Field      | Type                                                                                                                  | Description                          |
+|------------|-----------------------------------------------------------------------------------------------------------------------|--------------------------------------|
+| custom_id  | string                                                                                                                | The custom ID provided for the modal |
+| components | array of [modal submit component data](/docs/interactions/receiving-and-responding#interaction-response-object-modal) | Values submitted by the user         |
+
+###### Component Interaction Response Structures
+
+| Component                                                                                              |
+|--------------------------------------------------------------------------------------------------------|
+| [String Select](/docs/components/reference#string-select-string-select-interaction-response-structure) |
+| [Text Input](/docs/components/reference#text-input-text-input-interaction-response-structure)          |
 
 ###### Resolved Data Structure
 
@@ -192,8 +208,8 @@ An [Interaction](/docs/interactions/receiving-and-responding#interaction-object)
 -   [Slash Commands](/docs/interactions/application-commands#slash-commands-example-interaction)
 -   [User Commands](/docs/interactions/application-commands#user-commands-example-interaction)
 -   [Message Commands](/docs/interactions/application-commands#message-commands-example-interaction)
--   [Message Components](/docs/components/reference#button-button-interaction)
--   [Select Menu Message Components](/docs/components/reference#string-select-string-select-interaction)
+-   [Message Components](/docs/components/using-message-components)
+-   [Modal Components](/docs/components/using-modal-components)
 
 An explanation of all the fields can be found in our [data models](/docs/interactions/receiving-and-responding#interaction-object).
 
@@ -266,10 +282,6 @@ Not all message fields are currently supported.
 
 ###### Modal
 
-:::warn
-Support for components in modals is currently limited to type 4 (Text Input).
-:::
-
 | Field      | Type                                                               | Description                                                    |
 |------------|--------------------------------------------------------------------|----------------------------------------------------------------|
 | custom_id  | string                                                             | Developer-defined identifier for the modal, max 100 characters |

docs/resources/message.mdx

@@ -53,7 +53,7 @@ An app will receive empty values in the `content`, `embeds`, `attachments`, and
 | stickers?                 | array of [sticker](/docs/resources/sticker#sticker-object) objects                                                                 | **Deprecated** the stickers sent with the message                                                                                                                                                                                                                       |
 | position?                 | integer                                                                                                                            | A generally increasing integer (there may be gaps or duplicates) that represents the approximate position of the message in a thread, it can be used to estimate the relative position of the message in a thread in company with `total_message_sent` on parent thread |
 | role_subscription_data?   | [role subscription data](/docs/resources/message#role-subscription-data-object) object                                             | data of the role subscription purchase or renewal that prompted this ROLE_SUBSCRIPTION_PURCHASE message                                                                                                                                                                 |
-| resolved?                 | [resolved](/docs/interactions/receiving-and-responding#interaction-object-resolved-data-structure) data                            | data for users, members, channels, and roles in the message's [auto-populated select menus](/docs/components/reference#string-select-select-menu-resolved-object)                                                                                                       |
+| resolved?                 | [resolved](/docs/interactions/receiving-and-responding#interaction-object-resolved-data-structure) data                            | data for users, members, channels, and roles in the message's [auto-populated select menus](/docs/interactions/receiving-and-responding#interaction-response-object-modal)                                                                                              |
 | poll? \[2\]               | [poll](/docs/resources/poll#poll-object) object                                                                                    | A poll!                                                                                                                                                                                                                                                                 |
 | call?                     | [message call](/docs/resources/message#message-call-object) object                                                                 | the call associated with the message                                                                                                                                                                                                                                    |