Skip to content

Conversation

anthonydiscord
Copy link
Contributor

@anthonydiscord anthonydiscord commented Aug 23, 2025

You asked for them
We building them
We documenting them

Here's Modal Components 👀 👀 🎉

What's New

We're introducing a new top-level Label component for modals that have a label, description, and can contain a Text Input or a String Select! You heard right, String Selects now work in modals!

  • String Selects now work in modals when placed inside a Label component
  • Text Inputs can also be used inside a Label component
  • When a Text Input is used in a Label component the label field on the Text Input is not allowed in favor of label on the Label component
  • ActionRow + TextInput is now deprecated in favor of the new Label component for better accessibility
  • The required field is now available on String Selects (defaults to true in modals, ignored in messages)
  • The disabled field on String Selects will trigger an error if used in modals and is not currently allowed
Timeline.1.mp4

@anthonydiscord anthonydiscord force-pushed the anthony/modal-components branch from c01c961 to f0add47 Compare August 25, 2025 17:50
@anthonydiscord anthonydiscord requested review from DV8FromTheWorld and advaith1 and removed request for colinloretz August 25, 2025 18:15
Comment on lines 4 to 7
topics:
- "User Apps"
- "HTTP API"
- "Interactions"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these topic arbitrary or a known set of tags?
I ask because user-apps doesn't really apply directly, and HTTP API only tangentially.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not saying we need to remove them, but I do wonder if we can have a "Components" tag or similar 👀

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like they can just be added or removed and it updates! Added components for this one and the past cv2 changelogs

Comment on lines 135 to 144
###### 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) |
| [User Select](/docs/components/reference#user-select-user-select-interaction-response-structure) |
| [Role Select](/docs/components/reference#role-select-role-select-interaction-response-structure) |
| [Mentionable Select](/docs/components/reference#mentionable-select-mentionable-select-interaction-response-structure) |
| [Channel Select](/docs/components/reference#channel-select-channel-select-interaction-response-structure) |
Copy link
Member

@DV8FromTheWorld DV8FromTheWorld Aug 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sooooooooooo unfortunately we are gonna need 2 tables in the short term:

  1. for message component interaction data structure
  2. for modal submit data structure

We don't want these docs to imply you might reeive anything other than String Select and TextInput for modals

Copy link
Member

@DV8FromTheWorld DV8FromTheWorld Aug 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also are gonna need to think about how properly represent the fact that Labels (and any other non-data-components) will be in modal_submit.components and have no data. We still need to indicate that they'll be here.

As an example, a label in modal_submit.components is just { type: 18, id: <#>, component: <component> }
Basically the same as ActionRow now that I think about it.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah. This got moved, so it isn't specific to modals right now.
Technically having something that was specific would be nice in the future, but frankly, I think this is fine.
So the above comments can perhaps be overlooked for now.

Hopefully people won't make assumptions about the data in modal_submit.components based on just this table, but take into consideration what can actually be put into a modal first.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Continuing the stream of consciousness...
This table actually is modal specific because Message Component Data Structure doesn't actually reference it, and it makes sense why, because Message Component Data Structure is itself actually already the data that you'd find from one of the structures referenced in this table

interaction.data vs interaction.data.components[0] and what not.

As such, we should remove the user/role/channel/mentionable selects from this table as those are for Message Component interactions.

I think in the future we can think improve the docs to

  1. have a single table that has a connection from component type -> interaction data structure
  2. have the Message Component interaction data structure make use of it
  3. have both Message Componnet interaction data and Modal Submit interaction data both list out the component data that they may contain.

So the biggest action item here is, i think, to remove the last 4 rows from the table? or strengthen message-component interaction data's reference to the table so that it isn't modal specific?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted this all. For now I removed the last 4 rows!

| 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) |
Copy link
Member

@DV8FromTheWorld DV8FromTheWorld Aug 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow uh, i didn't realize we were tying the message object's resolved field back into interactions. In the future we may need to promote 'resolved objects' to its own reference and let multiple entities reference it instead of other entities referencing it from the interaction section.

This does not need to be actioned currently. It is a note.

@anthonydiscord anthonydiscord merged commit b7db108 into main Aug 25, 2025
4 checks passed
@anthonydiscord anthonydiscord deleted the anthony/modal-components branch August 25, 2025 22:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants