Components

Channel Select Menus

Learn how to create and use channel select menu components with djs-core.

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.

Channel select menus dynamically show all channels the user can see. You can filter which channel types users can select using setChannelTypes().

Creating a Channel Select Menu

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.

Use channel select menus for features like configuring announcement channels, setting up logging channels, or any functionality that requires channel selection. Filter by channel type to show only relevant channels (text, voice, etc.).

Basic Channel Select Menu

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}`);
        }
    });

Multiple Channel Selection

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

Accessing Selected Channels

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}`);
    });

Channel Types

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}`);
        }
    });

Available Channel Types

You can filter which channel types users can select:

GuildText
ChannelType
Standard text channels for messages
GuildVoice
ChannelType
Voice channels for audio communication
GuildAnnouncement
ChannelType
Announcement channels for news and updates
GuildForum
ChannelType
Forum channels for structured discussions
GuildStageVoice
ChannelType
Stage channels for events and presentations
GuildCategory
ChannelType
Category channels for organizing other channels
PublicThread / PrivateThread / AnnouncementThread
ChannelType
Thread channels within other channels

Multiple Channel Types

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})`);
        }
    });

Channel Information

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}`,
        });
    });

Using Channel Select Menus in Commands

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 Menu Data

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.

Component Definition (without data)

src/components/selects/channel/config.ts
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(", ")}`,
        );
    });

Using Select Menu with Data

src/interactions/commands/config.ts
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],
        });
    });

Min and Max Values

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

Disabled Channel Select Menu

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");
    });