Using Modal Components

Guide to creating and displaying modal dialogs with text input fields.

Overview

Modal components are a great way to collect freeform information from your users.

Prerequisites

• You must have a Discord account and be a member of the Discord Developer Portal.
• You must have a Discord application created in the Discord Developer Portal.

---

Displaying a Modal

Displaying a modal can be done in response to an interaction. When displaying a modal you’ll use an interaction response with the MODAL interaction callback type and modal fields.

An example of a modal with a String Select and Text Input both wrapped in Labels:

{
  "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": "🐜"
              }
            },
            {
              "label": "Butterfly",
              "value": "butterfly",
              "emoji": {
                "name": "🦋"
              }
            },
            {
              "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
        }
      }
    ]
  }
}