Skip to content
Lunibee 🐝

ModalBuilder

ModalBuilder creates a modal popup form that Discord displays to a user. Modals can contain 1–5 ActionRowBuilder<TextInputBuilder> rows.

Import

Section titled “Import”
import { ModalBuilder, ActionRowBuilder, TextInputBuilder, TextInputStyle } from "lunibee";

Methods

Section titled “Methods”

setCustomId(id)

Section titled “setCustomId(id)”

Sets the custom ID used to identify this modal when submitted (max 100 characters).

modal.setCustomId("ticket_modal");

setTitle(title)

Section titled “setTitle(title)”

Sets the modal window title (max 45 characters).

modal.setTitle("Open a Support Ticket");

addComponents(...rows)

Section titled “addComponents(...rows)”

Adds ActionRowBuilder<TextInputBuilder> rows to the modal (1–5).

modal.addComponents(
  new ActionRowBuilder<TextInputBuilder>().addComponents(
    new TextInputBuilder()
      .setCustomId("subject")
      .setLabel("Subject")
      .setStyle(TextInputStyle.Short)
      .setRequired(true),
  ),
);

toJSON()

Section titled “toJSON()”

Serializes to a raw Discord API-compatible modal object.

TextInputBuilder

Section titled “TextInputBuilder”

Methods

Section titled “Methods”
Method Description
setCustomId(id) Unique ID for this field (used in fields.getTextInputValue()).
setLabel(label) The visible field label (max 45 chars).
setStyle(style) TextInputStyle.Short (single line) or TextInputStyle.Paragraph (multi-line).
setRequired(required) Whether the field is required.
setValue(value) Pre-filled default value.
setPlaceholder(text) Placeholder text (max 100 chars).
setMinLength(min) Minimum character length.
setMaxLength(max) Maximum character length.

Full Example

Section titled “Full Example”
import {
  ModalBuilder,
  ActionRowBuilder,
  TextInputBuilder,
  TextInputStyle,
} from "lunibee";


// Build the modal
const modal = new ModalBuilder()
  .setCustomId("report_form")
  .setTitle("Report a User")
  .addComponents(
    new ActionRowBuilder<TextInputBuilder>().addComponents(
      new TextInputBuilder()
        .setCustomId("reported_user")
        .setLabel("Reported User ID or Username")
        .setStyle(TextInputStyle.Short)
        .setRequired(true),
    ),
    new ActionRowBuilder<TextInputBuilder>().addComponents(
      new TextInputBuilder()
        .setCustomId("reason")
        .setLabel("Reason for reporting")
        .setStyle(TextInputStyle.Paragraph)
        .setRequired(true)
        .setMaxLength(1000),
    ),
  );


// Show the modal in response to a command
client.on("interactionCreate", async (interaction) => {
  if (!interaction.isChatInputCommand() || interaction.commandName !== "report") return;
  await interaction.showModal(modal);
});


// Handle the modal submission
client.on("interactionCreate", async (interaction) => {
  if (!interaction.isModalSubmit() || interaction.customId !== "report_form") return;
  const userId = interaction.fields.getTextInputValue("reported_user");
  const reason = interaction.fields.getTextInputValue("reason");
  await interaction.reply({
    content: `📨 Report filed for **${userId}**: ${reason}`,
    ephemeral: true,
  });
});