Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-12 01:23:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(guide): updated modal page for label (#11169)

Browse Source 
* feat(guide): updated modal page for label

* feat(guide): updated modal page with modal component sections

* feat(guide): added modal to select menu page

* fix(guide): moved select menu and add text display callout

* feat(guide): reworked to show modal together instead of separately

* feat(guide): added file upload  to modal

* fix: code block focus in modals

* fix: grammar

* fix: grammar and wording

* feat: structure and readability

General improvements to structure and reading flow
* Reword sentence structure
* Use semantic code highlights
* Consistent heading casing
* Add additional explanations and elaborations
* Adapt legacy examples in text
* Omit repeated code for brevity and less scrolling

* fix: updated example Image

* chore: typos, grammar, rephrasing

Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Ryan Munro <monbrey@gmail.com>

* chore: review rephrasing

Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Ryan Munro <monbrey@gmail.com>

* chore: rephrasing for correctness

Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>

* chore: rephrasing for correctness

* chore: rephrasing for correctness

* chore: formatting

* chore: rephrasing for correctness

Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>

* chore: update text

---------

Co-authored-by: almostSouji <timoqueezle@gmail.com>
Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Ryan Munro <monbrey@gmail.com>
This commit is contained in:
William Bowen
2025-11-28 06:33:26 -05:00
committed by GitHub
parent 02fc101069
commit b2cbdf1567
5 changed files with 329 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/guide/content/docs/legacy/interactive-components/select-menus.mdx
View File

@@ -2,13 +2,17 @@
title: Select Menus
---
Select menus are one of the `MessageComponent` classes, which can be sent via messages or interaction responses.
Select menus are interactive components which can be sent via messages, interaction responses, or in modals.
<Callout>
This page is a follow-up to the [slash commands](../slash-commands/advanced-creation) section and [action
rows](../interactive-components/action-rows) page. Please carefully read those pages first so that you can understand
the methods used here.
</Callout>
<Callout>
This page is for using select menus in messages. For using [select menus in
modals](../interactions/modals#select-menu) visit the modal page
</Callout>
## Building string select menus
@@ -22,13 +26,17 @@ const { StringSelectMenuBuilder, StringSelectMenuOptionBuilder, SlashCommandBuil
module.exports = {
// data: new SlashCommandBuilder()...
async execute(interaction) {
const select = new StringSelectMenuBuilder()
const favoriteStarterSelect = new StringSelectMenuBuilder()
.setCustomId('starter')
.setPlaceholder('Make a selection!')
.addOptions(
// String select menu options
new StringSelectMenuOptionBuilder()
// Label displayed to user
.setLabel('Bulbasaur')
// Description of option
.setDescription('The dual-type Grass/Poison Seed Pokémon.')
// Value returned in select menu interaction
.setValue('bulbasaur'),
new StringSelectMenuOptionBuilder()
.setLabel('Charmander')
@@ -59,17 +67,21 @@ const {
StringSelectMenuOptionBuilder,
SlashCommandBuilder,
} = require('discord.js');
// [!code focus:30]
// [!code focus:33]
module.exports = {
// data: new SlashCommandBuilder()...
async execute(interaction) {
const select = new StringSelectMenuBuilder()
const favoriteStarterSelect = new StringSelectMenuBuilder()
.setCustomId('starter')
.setPlaceholder('Make a selection!')
.addOptions(
// String select menu options
new StringSelectMenuOptionBuilder()
// Label displayed to user
.setLabel('Bulbasaur')
// Description of option
.setDescription('The dual-type Grass/Poison Seed Pokémon.')
// Value returned in select menu interaction
.setValue('bulbasaur'),
new StringSelectMenuOptionBuilder()
.setLabel('Charmander')
@@ -81,9 +93,11 @@ module.exports = {
.setValue('squirtle'),
);
// [!code ++:6]
const row = new ActionRowBuilder().addComponents(select);
// [!code ++:8]
// Adding a string select menu to an action row
const row = new ActionRowBuilder().addComponents(favoriteStarterSelect);
// Reply with the action row
await interaction.reply({
content: 'Choose your starter!',
components: [row],
@@ -99,7 +113,7 @@ module.exports = {
components](../popular-topics/display-components) system.
</Callout>
### String select menu options
## String select menu options
String select menu options are custom-defined by the user, as shown in the example above. At a minimum, each option must have it's `label` and `value` defined. The label is shown to the user, while the value is included in the interaction sent to the bot.