Components V2

Discord’s Message Components V2 allow you to build rich, interactive messages with complex layouts. This guide provides a quick reference for all available components.

Ticketon exclusively uses Components V2 for its messages.

Layout Components

Layout components help you organize and structure your message content.

Action Row

A container for a row of interactive components. It can hold up to 5 buttons or a single select menu.

Section

Displays text content alongside an “accessory” component (a button or thumbnail).

Container

Visually groups a set of components together, with an optional colored accent bar on the side. It basically looks like an embed, but doesn’t have the same fields. It can also be spoilered.

Separator

Adds vertical spacing and an optional visual divider line between other components.

Content Components

Content components are used to display static information like text, images, and files.

Text Display

Displays Markdown-formatted text, similar to a standard message.

Media Gallery

Displays a gallery of 1-10 images or other media items in an organized grid. Media items can be spoilered.

Thumbnail

A small image, used as an accessory in a Section component. It can be spoilered.

Interactive Components

These components allow users to interact with the bot. With the exception of buttons used as a section accessory, all interactive components must be placed within an Action Row.

Buttons

Buttons trigger actions when clicked. They must be placed in an Action Row or used as an accessory in a Section.

Buttons in Ticketon can have different actions:

Link: Opens a URL in the user’s browser.
Reply: Replies to the message with another custom message.
Create Ticket: Starts the ticket creation process for the configured category.
Close Ticket: Closes the ticket (only usable in a ticket channel).
Reopen Ticket: Reopens a closed ticket (only usable in a closed ticket channel).
Delete Ticket: Deletes the ticket channel and marks the ticket as deleted (only usable in a closed ticket channel).
Transfer Ticket: Starts the ticket transfer process (only usable in a ticket channel).
Add Users: Starts the process to add users to the ticket (only usable in a ticket channel).
Remove Users: Starts the process to remove users from the ticket (only usable in a ticket channel).
Create Close Request: Creates a close request for the ticket, which can be approved or denied by the opposing party (only usable in a ticket channel).
Claim Ticket: Claims the ticket for the user, if the ticket is unclaimed (only usable in a ticket channel).
Unclaim Ticket: Unclaims the ticket, making it available for others to claim (only usable in a ticket channel).

Select Menus

Select menus allow users to select options from a dropdown list. They must be placed in an Action Row — it must be the only component in the Action Row. They can do every action a button can do, ecxept Links.

Form Components

Components V2 also bring along new components for forms (modals). Ticketon’s forms support the following components:

Text Inputs
String Select Menus (dropdowns)
User/Role/Mentionable/Channel Select Menus
File Uploads
Checkboxes
Checkbox Groups
Radio Groups

This allows for much more interactive and dynamic forms compared to the previous version. Discord is continuing to expand the capabilities of modal components, however it usually takes a few weeks for the library used to build Ticketon (discord.js) to support new features after Discord releases them. Since discord.js also usually has bugs, new features may take longer to be usable in Ticketon.

Why are labels and values separated for select menus and checkbox/radio groups?

Most form components are self-explanatory, but let’s go through the more complex ones:

String Select Menus

String Select Menus (dropdowns) allow users to select a options from a dropdown list of up to 25 options. Each option has a label (what the user sees) and a value (what you receive in the form submission). You can also set an optional description and emoji for each option.

Checkboxes

When a checkbox is selected, the form submission has the output of either ’✅’ or ’❌’ for that checkbox.

Checkbox Groups

Checkbox groups are very special. It allows for a selection of multiple options, each represented by a checkbox. Maximum number of options is 10. The output of a checkbox group is multiple values, but you have two options how the output is formatted:

Ouput Formats

Unordered List: the output is a list of values. For example:
```
- Value 1
- Value 2
- Value 3
```
Yes, it’s called “unordered” because techy terms it is called that, but the output is usually ordered from top to bottom — it’s just not numbered.
Comma-Separated: the output is a comma-separated list of values. For example:
```
Value 1, Value 2, Value 3
```

As you can see — you will receive the values of the selected options, not the labels. Labels are user-facing, while values are used for processing form submissions. Make sure to set the value of each option to something unique and descriptive, since that is what you will receive in the form submission.

Radio Groups

Radio groups allow users to select a single option from a list of options. Maximum number of options is 10. The output of a radio group is the single value of the selected option.

FAQ

Can I mix and match components from V1 and V2?

No. Ticketon exclusively uses Components V2 for its messages. Additionally, Discord does not allow mixing V1 and V2 components in the same message. It’s either embeds + action rows or components V2 only.

Where can I find more information about Discord’s Message Components V2?

You can refer to the official Discord documentation on Message Components for detailed information about each component type, their properties, and usage guidelines.

However, this is a developer-focused resource, and may not be very user-friendly for non-developers.

Why are labels and values separated for select menus and checkbox/radio groups?

Let’s say you have a select menu for choosing a pre-defined reason for a report. For the user you typically want to show a nice label with a sentence describing the reason, but for processing the form submission you want to receive a short discriptive value that is more concise.

Label: “Why do you want to report this user?”
- Option 1: “Spamming in channels”
  - Value: “Spam”
- Option 2: “Harassment or bullying”
  - Value: “Harassment”
- Option 3: “Impersonation”
  - Value: “Impersonation”

This is a very brief explanation, but I hope it makes it clear why labels and values are separate. They must not be different, but it can be useful to have separate labels and values.