Select Menus

Select menus are used to select an option from a list of options in a dropdown. They are created by extending the SelectMenu class, and adding a options property.

src/components/select-menu.ts

class StringSelect extends StringSelectMenu {
	customId = "string-select"
	placeholder = "String select menu"
	options = [{ label: "Option 1", value: "option1" }, { label: "Option 2", value: "option2" }]
	async run(interaction: StringSelectMenuInteraction) {
		await interaction.reply(interaction.values.join(", "))
	}
}
 
class RoleSelect extends RoleSelectMenu {
	customId = "role-select"
	placeholder = "Role select menu"
	async run(interaction: RoleSelectMenuInteraction) {
		await interaction.reply(interaction.values.join(", "))
	}
}
class MentionableSelect extends MentionableSelectMenu {
	customId = "mentionable-select"
	placeholder = "Mentionable select menu"
	async run(interaction: MentionableSelectMenuInteraction) {
		await interaction.reply(interaction.values.join(", "))
	}
}
class ChannelSelect extends ChannelSelectMenu {
	customId = "channel-select"
	placeholder = "Channel select menu"
	async run(interaction: ChannelSelectMenuInteraction) {
		await interaction.reply(interaction.values.join(", "))
	}
}
class UserSelect extends UserSelectMenu {
	customId = "user-select"
	placeholder = "User select menu"
	async run(interaction: UserSelectMenuInteraction) {
		await interaction.reply(interaction.values.join(", "))
	}
}

Here we have five examples of select menus, each with a different type of option. Only the StringSelectMenu class requires you to provide options, the other 4 will automatically be populated by Discord (and allow searching as well).

On this page