Carbon

Select Menus

Select menus are used to select an option from a list of options in a dropdown

Select menus are used to select an option from a list of options in a dropdown. Subclassing each menu type is the recommended approach:

src/components/select-menu.ts
import {
	StringSelectMenu,
	type StringSelectMenuInteraction,
	RoleSelectMenu,
	type RoleSelectMenuInteraction,
	MentionableSelectMenu,
	type MentionableSelectMenuInteraction,
	ChannelSelectMenu,
	type ChannelSelectMenuInteraction,
	UserSelectMenu,
	type UserSelectMenuInteraction
} from "@buape/carbon";

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(", "))
	}
}

Inline Select Menus

When you need a select menu only once, you can instantiate it inline:

import { StringSelectMenu, type StringSelectMenuInteraction } from "@buape/carbon";

const inlineStringSelect = new (class extends StringSelectMenu {
	customId = "string-inline"
	options = [{ label: "Quick Option", value: "quick" }]

	async run(interaction: StringSelectMenuInteraction) {
		await interaction.reply(interaction.values.join(", "))
	}
})()

Only the StringSelectMenu requires you to provide choices. The other menus are automatically populated by Discord (and allow searching as well).

Edit on GitHub

Last updated on