Channel select menus allow users to select one or more Discord channels from the server. They're useful for channel configuration, announcements, or channel-based features.
setChannelTypes().Channel select menus in djs-core are created using the ChannelSelectMenu class. Each select menu component file in src/components/selects/channel/ is automatically registered.
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu()
.setPlaceholder("Select a channel")
.run(async (interaction) => {
const selectedChannel = interaction.channels.first();
if (selectedChannel) {
await interaction.reply(`You selected: ${selectedChannel.name}`);
}
});
Channel select menus can allow users to select multiple channels:
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu()
.setPlaceholder("Select channels")
.setMinValues(1)
.setMaxValues(5)
.run(async (interaction) => {
const selectedChannels = interaction.channels.map((channel) => channel.name);
await interaction.reply(`Selected channels: ${selectedChannels.join(", ")}`);
});
The interaction.channels collection contains all selected channels:
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu()
.setPlaceholder("Select channels to mention")
.run(async (interaction) => {
const mentions = interaction.channels.map((ch) => ch.toString()).join(" ");
await interaction.reply(`Selected channels: ${mentions}`);
});
You can filter which channel types users can select:
import { ChannelSelectMenu } from "@djs-core/runtime";
import { ChannelType } from "discord.js";
export default new ChannelSelectMenu()
.setPlaceholder("Select a text channel")
.setChannelTypes([ChannelType.GuildText])
.run(async (interaction) => {
const channel = interaction.channels.first();
if (channel && channel.isTextBased()) {
await interaction.reply(`Selected text channel: ${channel.name}`);
}
});
You can filter which channel types users can select:
import { ChannelSelectMenu } from "@djs-core/runtime";
import { ChannelType } from "discord.js";
export default new ChannelSelectMenu()
.setPlaceholder("Select text or forum channel")
.setChannelTypes([ChannelType.GuildText, ChannelType.GuildForum])
.run(async (interaction) => {
const channel = interaction.channels.first();
if (channel) {
await interaction.reply(`Selected: ${channel.name} (${channel.type})`);
}
});
You can access detailed information about selected channels:
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu()
.setPlaceholder("Select a channel")
.run(async (interaction) => {
const channel = interaction.channels.first();
if (!channel) return;
await interaction.reply({
content: `Channel Info:
**Name:** ${channel.name}
**ID:** ${channel.id}
**Type:** ${channel.type}`,
});
});
Channel select menus are typically sent as part of a command response:
import { Command, ChannelSelectMenu } from "@djs-core/runtime";
import { ActionRowBuilder } from "discord.js";
import channelSelect from "../../components/selects/channel/announce";
export default new Command()
.setDescription("Select announcement channel")
.run(async (interaction) => {
const row = new ActionRowBuilder<ChannelSelectMenu>().addComponents(
channelSelect,
);
await interaction.reply({
content: "Select a channel for announcements:",
components: [row],
});
});
Channel select menus can receive custom data. Important: The data is set when you use the select menu from a command or another component, not in the component definition.
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu<{ category: string }>()
.setPlaceholder("Select channels")
.run(async (interaction, data) => {
const channels = interaction.channels.map((ch) => ch.name);
await interaction.reply(
`Configured ${data.category} channels: ${channels.join(", ")}`,
);
});
import { Command, ChannelSelectMenu } from "@djs-core/runtime";
import { ActionRowBuilder } from "discord.js";
import configChannelSelect from "../../components/selects/channel/config";
export default new Command()
.setDescription("Configure channels")
.run(async (interaction) => {
const row = new ActionRowBuilder<ChannelSelectMenu>().addComponents(
configChannelSelect.setData({ category: "announcements" }),
);
await interaction.reply({
content: "Select announcement channels:",
components: [row],
});
});
Control how many channels can be selected:
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu()
.setPlaceholder("Select 2-4 channels")
.setMinValues(2)
.setMaxValues(4)
.run(async (interaction) => {
const channels = interaction.channels.map((ch) => ch.name);
await interaction.reply(`Selected ${channels.length} channel(s): ${channels.join(", ")}`);
});
Channel select menus can be disabled:
import { ChannelSelectMenu } from "@djs-core/runtime";
export default new ChannelSelectMenu()
.setPlaceholder("This menu is disabled")
.setDisabled(true)
.run(async (interaction) => {
await interaction.reply("Menu is disabled");
});