Most Wanted Features for Modals #5883
Why did I open this discussion?I did because there are a lot of discussions for modals. I want to collect them and show my ideas about them. As the feature requests are being added, I try to update the concept designs and code examples using the official designs and information so they don't mislead anyone. Most Wanted Features for ModalsQuick ChecklistHuge thanks to @advaith1 for finally giving us what we need!!
File Upload Component
Related Discussions
Description / Use Cases
Concept DesignOfficial design image taken from #7887 Example Code{
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [{
"type": 18, // type 18 for label component
"label": "Files",
"description": "Please upload some files",
"component": {
"type": 19, // type 19 for file upload component
"custom_id": "files",
"min_values": 2,
"max_values": 5,
"required": true
}
}]
}Number Input Component
Related Discussions
Description / Use Cases
Concept DesignMade by @Tolga1452 Example Code{
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [{
"type": 0, // a new type for number input components
"custom_id": "number",
"label": "Enter a number between 0 and 100",
"min_value": 0,
"max_value": 100,
"default_value": 20,
"required": true
}]
}Boolean Component (Checkbox, Checkbox Group, and Radio Group Components)
Note This concept is being implemented as Checkbox, Checkbox Group, and Radio Group Components. Switches/toggles in Modals are not going to be added because of the design guidelines, as confirmed by @advaith1 (Message in Discord Developers Server). Related Discussions
Description / Use Cases
My IdeasI named it "Boolean Component" because I think checkboxes, switches, and radio switches should be styles of the same component (like buttons). Because they have different purposes but they have the same value. For example; checkboxes are generally used for selecting, and switches are generally used for enabling/disabling. And they are returning with a boolean. Also, radio switches couldn't return with Concept DesignsOfficial designs image taken from #8123 Example Code (Outdated){
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [
{
"type": 0, // a new type for boolean components
"custom_id": "sure",
"label": "Are you sure?",
"style": 1, // 1 for checkbox style
"required": true
},
{
"type": 0, // a new type for boolean components
"custom_id": "enable",
"label": "Just enable it.",
"style": 2, // 2 for switch style
"required": true
},
{
"type": 0, // a new type for boolean components
"custom_id": "manage_messages",
"label": "Manage Messages Permission",
"style": 3, // 3 for radio switch style
"required": true
}
]
}Text Display Component
Related Discussions
Description / Use CasesThis will allow you to add regular texts inside modals. My IdeasLabels are really a good idea for confirmation modals. So I think there could be no warning for label-only modals because you can't send anything with them. Also "Submit" button could be an "Okay" button. Concept DesignOfficial design image taken from #7804 Example Code{
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [{
"type": 10, // type 10 for text display components
"content": "# This is a header\nAnd here is some other text\n\n- here is some more markdown\n- even ||spoilers|| and `codes`\n- https://discord.com is a link\n - and emojis! ✨🔥🎉"
}]
}Select Components
Related Discussions
Description / Use CasesThis will allow you to add Select Menu Components inside modals. Concept DesignOfficial design image taken from #7773 Example Code{
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [{
"type": 18, // type 18 for label component
"label": "Favorite Color",
"description": "What is your favorite color?",
"component": {
"type": 3, // type 3, 5, 6, 7 or 8 for select components
"custom_id": "color",
"placeholder": "Select a color...",
"required": true,
"options": [
{
"label": "Red",
"value": "red"
},
{
"label": "Blue",
"value": "blue"
},
{
"label": "Orange",
"value": "orange"
}
]
}
}]
}Pagination
Related DiscussionsNone. Description / Use CasesMost people want to make pages for modals or add more components to a modal. As all of you know, we can only add up to 5 action rows into a modal right now. But we can add more components with pagination. And I think pages should be set automatically. So if you put 7 action rows in a modal, it will have 2 pages. The first has 5 (max), and the second has 2 action rows. Then you don't need to make any changes on your code. Concept DesignMade by @Tolga1452 Color Picker Component
Related DiscussionsNone. Description / Use CasesA color picker component would be useful for some customization options and more. Especially it would be helpful for people who don't have much knowledge about color codes. Just click on it and select your color! Concept DesignMade by @Zyrenth Example Code{
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [{
"type": 0, // a new type for color picker component
"custom_id": "color",
"label": "Select your profile color.",
"description": "Profile Color", // this will be displayed under the color picker box, maybe it can be "name" or "label" instead of "description"
"required": true
}]
}Autocompletion for Emojis and Mentions
Related Discussions
Description / Use CasesDiscord has built-in autocompletion for emojis and mentions in chat input, but you can't use it in modals. If you want to type an emoji then you have to close the modal, type the emoji, and copy it with its id. Same problem with mentions. This makes it harder to use modals. Date Picker Component
Related Discussions
Description / Use CasesA date picker inside modals could be a good feature for the general usage of modals. My IdeasDiscord already has built-in date pickers. For example you can find one while creating an event. But these only allow you to select a date and time. I think a relative date selection can also be a good idea. For example you used a reminder command to remind you of a message after 5 hours and the For regular date pickers; Also style Concept DesignMade by @Tolga1452 Example Code{
"title": "My Cool Modal",
"custom_id": "cool_modal",
"components": [
{
"type": 0, // a new type for date picker component
"custom_id": "date_only",
"label": "A Date Picker",
"style": 1, // style 1 for the date only picker
"required": true
},
{
"type": 0, // a new type for date picker component
"custom_id": "date_and_time",
"label": "A Date Picker With Time"",
"style": 2 // style 2 for the date and time pickers
"required": true
},
{
"type": 0, // a new type for date picker component
"custom_id": "relative",
"label": "A Relative Date Picker",
"style": 3 // style 3 for the relative date picker
"required": true
}
]
} |
Replies: 79 comments 42 replies
|
👌 |
|
Please, for the love of God, I would be 10x more willing to have this for bulk information submission and retrieval than to deal with each individual interaction. Being able to send and retrieve information in bulk would just be miles better. |
|
I would like to mention that my concept includes labels as a button style, too. And you forgot modal pages. |
|
i mentioned about it and added modal pages now |
|
I'd absolutely love to see at least some of these features make it into the API |
|
Boolean component was confirmed to be the planned by @kingmigdor |
|
what's the source for that claim? that user is not staff |
|
I'd like to suggest multiSelect components. |
|
My use case for this is that I want the user to be able to select from a list of thread members, currently doing this is a pain at best, and the UX is awful. I could limit the number of users, but to keep it in a single modal I would need 8 fields (3 for one category & 5 for the other are my acceptable numbers) which currently can't happen, additionally the UX of 7 optional menus (1 category requires 1, other requires 0) is poor. I could split it across two modals, but that requires more control flow, more clicks for the user, and has the empty menu issue to a slightly lesser degree. MultiSelect for |
|
Man I really hope they add some new stuff to Modals.. |
|
Seriously, any kind of dev feedback on this would be greatly appreciated. Even just Buttons and Selectors (but preferably also Pagination) would solve making forms viable. Alternatively, making InputText allowed in messages would also solve this, even if in a kind of ugly way. The current state of things is incredibly frustrating as a new dev. |
|
I'm sorry, I'm very new here (both to bot development and web development in general). Are you saying this is something that is already viable for forms? Because my current workaround sucks, and I'd love something better. |
|
I agree with everything people are saying. I built an integrated dashboard for my bot with modals buttons and selects because the tools are so powerful. BUT, I was really restricted with modals. Everything else is great! I really feel like Discord should prioritize this. Bots are what make Discord a one-size-fits-all in my opinion, but in their current state, they're bulky to use. I think this would be a major step forward. |
|
ian said in ddevs they have no plans for modals |
|
|
|
Yes, but he also said in Discord,
So that's all I was doing. We can dream. |
|
I would like to see these make it into an update, it would be really useful. Also, I thought a color picker could be helpful as well so I made a concept for that one as well.
|
|
bump |
|
This definitely needs to be answered by a dev. |
|
This is actually getting old. Do we have any ETA for deploying the planned features? |
|
discord never does ETAs, plus they've claimed having no plans for modals |
|
I would love to see this implemented as well along with these modal upgrades: #5291 (Allow the use of Mentions and Emojis in Modals) |
|
Much needed! I hope the API developers consider some of these suggestions. Would definitely improve the usability and applicability of Modals. |
|
I definitely see potential here with these features for modals. I already had ideas for chechboxes usage but was let down it's not implemented :( Just text fields for modals are boring. |
|
Create a "Date Component", like a calendar. Bots/Apps use tons of Date method. |
Improved Components
New Components
New Modal FeaturesI'd love to be able to return a "rejected" modal with custom validation reasons. The current way to do this is to store (in a db) or encode (into the message) the user's last response, tell them what they did wrong, have them click a button to open the modal again with their previous answers pre-filled, and hope they fix their mistake(s). This is not a very pleasant UX, unfortunately. I'd love to be able to reject the modal natively without workarounds like this! |
|
An option for the user to specify an emoji with the short text component would be really useful. This corresponds closely to string select menu options which supports an emoji, allowing us to more easily offer users customisable interfaces with string select menus. |
|
Adding onto this - emoji-only selector input? Thinking like the "Related emoji" field when creating a sticker. |
|
I don't have much of a concept design for this atm, but regex validation for short inputs would be nice. |
|
With regex validation baked in you'd be able to make date inputs that get validated before sending the command. |
|
I have updated the related info for File Upload components as it is available in the API now 👀 Also I added a quick checklist at the top so we can see easily how much of the requested features we get over time. |
|
These updates are great. I’m already using most of the new features. Thanks! One thing I’d love to see in the future is support for state handling between components. |
|
Some pagination of modal would be nice, or replying with modal after modal submission. Or increasing the number of components to 10 for example. Currently it's very limiting. |
|
Date Picker Component is FIRE. Concept idea ( screenshot from search filters): 
|
|
https://discord.com/channels/613425648685547541/1415408280225972266/1442065693561327716 |
I think you misunderstood. This is just an idea that it could be like that, nobody said this is their work and date pickers are coming. |
Fair, I was just pointing out it was posted there. |
|
the things i would do for a date picker in modals 💄 |
|
The boolean components (Checkboxes, Checkbox Groups and Radio Groups) were just released! 🎉 |
|
I have updated the information related to Checkbox, Checkbox Group, and Radio Group Components (aka Boolean Components)! There are only 4 feature requests left in the list 👀 |
|
Thoughts on adding regex validation to the list of ideals? I know it's been mentioned a couple times :) |
|
@Tolga1452 which ones are you next considering? Having multiple modals one by one, or pages could be great.. |
|
I'm still praying for the paged modals! I'd love it if there was a "continue" button to click on that would swipe to the next page on the modal. |
|
I believe pagination as the event creating layout would be a better pick rather than numeric page creation. |
|
Not a bad idea/concept, but this might limit the functionality for X pages unless limited to like <= 5 pages. But certainly, if there is a limit between 3-5, this is not a bad layout/concept to use. |
|
I agree, and love the idea for a few pages! I don't know if Discord would be open to large numbers of modal pages in the first place, in which case this design would cover every use case |
|
[ |
|
Radio and Checkbox group just got released into Discord.js v14.26.0! |
|
Would it be possible to add image previews to modals too? Image PreviewsUsing the API, you can attach an image to be displayed inside a modal. This will function almost identically to Example usecase:
Since this is already possible with components v3, I believe it would be a pretty simple addition that would drastically elevate the potential of modals. |
|
I saw someone ask if it were possible to add image previews. I feel like the better alternative would be to implement media support in the same way Embeds handle it. Modals would receive the same components as embeds: thumbnail, image, author-icon, video, footer, etc. Following from integrating support that embeds have:
Basically... modals have immense potential. Especially in bot game development for terminals and such i.e. |
and others
We've just released support for String Selects in modals, as well as a new top-level Label component that supports descriptions!
https://discord.com/developers/docs/change-log#introducing-new-modal-components