feat: radio groups and checkbox in modal (#1495)

* feat: radio groups and checkbox in modal

* fix: submit property type

* fix: value for radio group can be missing if not selected

* chore: mark unstable and update docs

* chore: update component enum names

* chore: fix component type

* chore: docs and links

* fix: component names

* chore: suggestions
This commit is contained in:
Naiyar
2026-01-26 16:23:23 +06:00
committed by GitHub
parent df9c860cca
commit 18fa946bdf
8 changed files with 656 additions and 8 deletions

View File

@@ -40,10 +40,25 @@ export interface APIModalSubmitFileUploadComponent extends APIBaseModalSubmitCom
values: string[];
}
export interface APIModalSubmitRadioGroupComponent extends APIBaseModalSubmitComponent<ComponentType.RadioGroup> {
value?: string;
}
export interface APIModalSubmitCheckboxGroupComponent extends APIBaseModalSubmitComponent<ComponentType.CheckboxGroup> {
values: string[];
}
export interface APIModalSubmitCheckboxComponent extends APIBaseModalSubmitComponent<ComponentType.Checkbox> {
value: boolean;
}
export type ModalSubmitComponent =
| APIModalSubmitChannelSelectComponent
| APIModalSubmitCheckboxComponent
| APIModalSubmitCheckboxGroupComponent
| APIModalSubmitFileUploadComponent
| APIModalSubmitMentionableSelectComponent
| APIModalSubmitRadioGroupComponent
| APIModalSubmitRoleSelectComponent
| APIModalSubmitStringSelectComponent
| APIModalSubmitTextInputComponent

View File

@@ -1034,6 +1034,24 @@ export enum ComponentType {
* Component for uploading files
*/
FileUpload,
/**
* Single-choice set of radio group option
*
* @unstable This component is not publicly released and is currently in preview.
*/
RadioGroup = 21,
/**
* Multi-select group of checkboxes
*
* @unstable This component is not publicly released and is currently in preview.
*/
CheckboxGroup,
/**
* Single checkbox for binary choice
*
* @unstable This component is not publicly released and is currently in preview.
*/
Checkbox,
// EVERYTHING BELOW THIS LINE SHOULD BE OLD NAMES FOR RENAMED ENUM MEMBERS //
/**
@@ -1690,11 +1708,134 @@ export interface APIFileUploadComponent extends APIBaseComponent<ComponentType.F
*/
max_values?: number;
/**
* Whether the file upload requires files to be uploaded before submitting the modal (defaults to `true`)
* Whether the file upload requires files to be uploaded before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APIRadioGroupComponent extends APIBaseComponent<ComponentType.RadioGroup> {
/**
* Id for the radio group; max 100 characters
*/
custom_id: string;
/**
* 2-10 radio group options within the radio group component
*/
options: APIRadioGroupOption[];
/**
* Whether the radio group requires selection before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APIRadioGroupOption {
/**
* The value of the radio group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the radio group option; max 100 characters
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupComponent extends APIBaseComponent<ComponentType.CheckboxGroup> {
/**
* Id for the checkbox group; max 100 characters
*/
custom_id: string;
/**
* Checkbox group option within the component; max 10
*/
options: APICheckboxGroupOption[];
/**
* Minimum number of checkbox that can be selected; min 0, max 10
*
* @defaultValue `1`
*/
min_values?: number;
/**
* Maximum number of checkbox that can be selected; min 1, max 10
*
* @defaultValue {@link APICheckboxGroupComponent.options} length
*/
max_values?: number;
/**
* Whether selecting within the group is required before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupOption {
/**
* The value of the checkbox group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the checkbox group option; max 100 characters;
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxComponent extends APIBaseComponent<ComponentType.Checkbox> {
/**
* Id for the checkbox; max 100 characters
*/
custom_id: string;
/**
* Whether this checkbox is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/resources/message#message-snapshot-object}
*/
@@ -1775,7 +1916,13 @@ export type APIComponentInModalActionRow = APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#label-label-child-components}
*/
export type APIComponentInLabel = APIFileUploadComponent | APISelectMenuComponent | APITextInputComponent;
export type APIComponentInLabel =
| APICheckboxComponent
| APICheckboxGroupComponent
| APIFileUploadComponent
| APIRadioGroupComponent
| APISelectMenuComponent
| APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#section}

View File

@@ -40,10 +40,25 @@ export interface APIModalSubmitFileUploadComponent extends APIBaseModalSubmitCom
values: string[];
}
export interface APIModalSubmitRadioGroupComponent extends APIBaseModalSubmitComponent<ComponentType.RadioGroup> {
value?: string;
}
export interface APIModalSubmitCheckboxGroupComponent extends APIBaseModalSubmitComponent<ComponentType.CheckboxGroup> {
values: string[];
}
export interface APIModalSubmitCheckboxComponent extends APIBaseModalSubmitComponent<ComponentType.Checkbox> {
value: boolean;
}
export type ModalSubmitComponent =
| APIModalSubmitChannelSelectComponent
| APIModalSubmitCheckboxComponent
| APIModalSubmitCheckboxGroupComponent
| APIModalSubmitFileUploadComponent
| APIModalSubmitMentionableSelectComponent
| APIModalSubmitRadioGroupComponent
| APIModalSubmitRoleSelectComponent
| APIModalSubmitStringSelectComponent
| APIModalSubmitTextInputComponent

View File

@@ -1029,6 +1029,24 @@ export enum ComponentType {
* Component for uploading files
*/
FileUpload,
/**
* Single-choice set of radio group option
*
* @unstable This component is not publicly released and is currently in preview.
*/
RadioGroup = 21,
/**
* Multi-select group of checkboxes
*
* @unstable This component is not publicly released and is currently in preview.
*/
CheckboxGroup,
/**
* Single checkbox for binary choice
*
* @unstable This component is not publicly released and is currently in preview.
*/
Checkbox,
// EVERYTHING BELOW THIS LINE SHOULD BE OLD NAMES FOR RENAMED ENUM MEMBERS //
/**
@@ -1685,11 +1703,134 @@ export interface APIFileUploadComponent extends APIBaseComponent<ComponentType.F
*/
max_values?: number;
/**
* Whether the file upload requires files to be uploaded before submitting the modal (defaults to `true`)
* Whether the file upload requires files to be uploaded before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APIRadioGroupComponent extends APIBaseComponent<ComponentType.RadioGroup> {
/**
* Id for the radio group; max 100 characters
*/
custom_id: string;
/**
* 2-10 radio group options within the radio group component
*/
options: APIRadioGroupOption[];
/**
* Whether the radio group requires selection before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APIRadioGroupOption {
/**
* The value of the radio group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the radio group option; max 100 characters
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupComponent extends APIBaseComponent<ComponentType.CheckboxGroup> {
/**
* Id for the checkbox group; max 100 characters
*/
custom_id: string;
/**
* Checkbox group option within the component; max 10
*/
options: APICheckboxGroupOption[];
/**
* Minimum number of checkbox that can be selected; min 0, max 10
*
* @defaultValue `1`
*/
min_values?: number;
/**
* Maximum number of checkbox that can be selected; min 1, max 10
*
* @defaultValue {@link APICheckboxGroupComponent.options} length
*/
max_values?: number;
/**
* Whether selecting within the group is required before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupOption {
/**
* The value of the checkbox group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the checkbox group option; max 100 characters;
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxComponent extends APIBaseComponent<ComponentType.Checkbox> {
/**
* Id for the checkbox; max 100 characters
*/
custom_id: string;
/**
* Whether this checkbox is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/resources/message#message-snapshot-object}
*/
@@ -1770,7 +1911,13 @@ export type APIComponentInModalActionRow = APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#label-label-child-components}
*/
export type APIComponentInLabel = APIFileUploadComponent | APISelectMenuComponent | APITextInputComponent;
export type APIComponentInLabel =
| APICheckboxComponent
| APICheckboxGroupComponent
| APIFileUploadComponent
| APIRadioGroupComponent
| APISelectMenuComponent
| APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#section}

View File

@@ -40,10 +40,25 @@ export interface APIModalSubmitFileUploadComponent extends APIBaseModalSubmitCom
values: string[];
}
export interface APIModalSubmitRadioGroupComponent extends APIBaseModalSubmitComponent<ComponentType.RadioGroup> {
value?: string;
}
export interface APIModalSubmitCheckboxGroupComponent extends APIBaseModalSubmitComponent<ComponentType.CheckboxGroup> {
values: string[];
}
export interface APIModalSubmitCheckboxComponent extends APIBaseModalSubmitComponent<ComponentType.Checkbox> {
value: boolean;
}
export type ModalSubmitComponent =
| APIModalSubmitChannelSelectComponent
| APIModalSubmitCheckboxComponent
| APIModalSubmitCheckboxGroupComponent
| APIModalSubmitFileUploadComponent
| APIModalSubmitMentionableSelectComponent
| APIModalSubmitRadioGroupComponent
| APIModalSubmitRoleSelectComponent
| APIModalSubmitStringSelectComponent
| APIModalSubmitTextInputComponent

View File

@@ -1034,6 +1034,24 @@ export enum ComponentType {
* Component for uploading files
*/
FileUpload,
/**
* Single-choice set of radio group option
*
* @unstable This component is not publicly released and is currently in preview.
*/
RadioGroup = 21,
/**
* Multi-select group of checkboxes
*
* @unstable This component is not publicly released and is currently in preview.
*/
CheckboxGroup,
/**
* Single checkbox for binary choice
*
* @unstable This component is not publicly released and is currently in preview.
*/
Checkbox,
// EVERYTHING BELOW THIS LINE SHOULD BE OLD NAMES FOR RENAMED ENUM MEMBERS //
/**
@@ -1690,11 +1708,134 @@ export interface APIFileUploadComponent extends APIBaseComponent<ComponentType.F
*/
max_values?: number;
/**
* Whether the file upload requires files to be uploaded before submitting the modal (defaults to `true`)
* Whether the file upload requires files to be uploaded before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APIRadioGroupComponent extends APIBaseComponent<ComponentType.RadioGroup> {
/**
* Id for the radio group; max 100 characters
*/
custom_id: string;
/**
* 2-10 radio group options within the radio group component
*/
options: APIRadioGroupOption[];
/**
* Whether the radio group requires selection before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APIRadioGroupOption {
/**
* The value of the radio group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the radio group option; max 100 characters
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupComponent extends APIBaseComponent<ComponentType.CheckboxGroup> {
/**
* Id for the checkbox group; max 100 characters
*/
custom_id: string;
/**
* Checkbox group option within the component; max 10
*/
options: APICheckboxGroupOption[];
/**
* Minimum number of checkbox that can be selected; min 0, max 10
*
* @defaultValue `1`
*/
min_values?: number;
/**
* Maximum number of checkbox that can be selected; min 1, max 10
*
* @defaultValue {@link APICheckboxGroupComponent.options} length
*/
max_values?: number;
/**
* Whether selecting within the group is required before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupOption {
/**
* The value of the checkbox group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the checkbox group option; max 100 characters;
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxComponent extends APIBaseComponent<ComponentType.Checkbox> {
/**
* Id for the checkbox; max 100 characters
*/
custom_id: string;
/**
* Whether this checkbox is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/resources/message#message-snapshot-object}
*/
@@ -1775,7 +1916,13 @@ export type APIComponentInModalActionRow = APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#label-label-child-components}
*/
export type APIComponentInLabel = APIFileUploadComponent | APISelectMenuComponent | APITextInputComponent;
export type APIComponentInLabel =
| APICheckboxComponent
| APICheckboxGroupComponent
| APIFileUploadComponent
| APIRadioGroupComponent
| APISelectMenuComponent
| APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#section}

View File

@@ -40,10 +40,25 @@ export interface APIModalSubmitFileUploadComponent extends APIBaseModalSubmitCom
values: string[];
}
export interface APIModalSubmitRadioGroupComponent extends APIBaseModalSubmitComponent<ComponentType.RadioGroup> {
value?: string;
}
export interface APIModalSubmitCheckboxGroupComponent extends APIBaseModalSubmitComponent<ComponentType.CheckboxGroup> {
values: string[];
}
export interface APIModalSubmitCheckboxComponent extends APIBaseModalSubmitComponent<ComponentType.Checkbox> {
value: boolean;
}
export type ModalSubmitComponent =
| APIModalSubmitChannelSelectComponent
| APIModalSubmitCheckboxComponent
| APIModalSubmitCheckboxGroupComponent
| APIModalSubmitFileUploadComponent
| APIModalSubmitMentionableSelectComponent
| APIModalSubmitRadioGroupComponent
| APIModalSubmitRoleSelectComponent
| APIModalSubmitStringSelectComponent
| APIModalSubmitTextInputComponent

View File

@@ -1029,6 +1029,24 @@ export enum ComponentType {
* Component for uploading files
*/
FileUpload,
/**
* Single-choice set of radio group option
*
* @unstable This component is not publicly released and is currently in preview.
*/
RadioGroup = 21,
/**
* Multi-select group of checkboxes
*
* @unstable This component is not publicly released and is currently in preview.
*/
CheckboxGroup,
/**
* Single checkbox for binary choice
*
* @unstable This component is not publicly released and is currently in preview.
*/
Checkbox,
// EVERYTHING BELOW THIS LINE SHOULD BE OLD NAMES FOR RENAMED ENUM MEMBERS //
/**
@@ -1685,11 +1703,134 @@ export interface APIFileUploadComponent extends APIBaseComponent<ComponentType.F
*/
max_values?: number;
/**
* Whether the file upload requires files to be uploaded before submitting the modal (defaults to `true`)
* Whether the file upload requires files to be uploaded before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APIRadioGroupComponent extends APIBaseComponent<ComponentType.RadioGroup> {
/**
* Id for the radio group; max 100 characters
*/
custom_id: string;
/**
* 2-10 radio group options within the radio group component
*/
options: APIRadioGroupOption[];
/**
* Whether the radio group requires selection before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#radio-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APIRadioGroupOption {
/**
* The value of the radio group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the radio group option; max 100 characters
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupComponent extends APIBaseComponent<ComponentType.CheckboxGroup> {
/**
* Id for the checkbox group; max 100 characters
*/
custom_id: string;
/**
* Checkbox group option within the component; max 10
*/
options: APICheckboxGroupOption[];
/**
* Minimum number of checkbox that can be selected; min 0, max 10
*
* @defaultValue `1`
*/
min_values?: number;
/**
* Maximum number of checkbox that can be selected; min 1, max 10
*
* @defaultValue {@link APICheckboxGroupComponent.options} length
*/
max_values?: number;
/**
* Whether selecting within the group is required before submitting the modal
*
* @defaultValue `true`
*/
required?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox-group-option-structure}
* @unstable This feature is not publicly released and is currently in preview.
*/
export interface APICheckboxGroupOption {
/**
* The value of the checkbox group option; max 100 characters
*/
value: string;
/**
* The label text; max 100 characters
*/
label: string;
/**
* An optional description for the checkbox group option; max 100 characters;
*/
description?: string;
/**
* Whether this option is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/components/reference#checkbox}
* @unstable This component is not publicly released and is currently in preview.
*/
export interface APICheckboxComponent extends APIBaseComponent<ComponentType.Checkbox> {
/**
* Id for the checkbox; max 100 characters
*/
custom_id: string;
/**
* Whether this checkbox is selected by default
*
* @defaultValue `false`
*/
default?: boolean;
}
/**
* @see {@link https://discord.com/developers/docs/resources/message#message-snapshot-object}
*/
@@ -1770,7 +1911,13 @@ export type APIComponentInModalActionRow = APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#label-label-child-components}
*/
export type APIComponentInLabel = APIFileUploadComponent | APISelectMenuComponent | APITextInputComponent;
export type APIComponentInLabel =
| APICheckboxComponent
| APICheckboxGroupComponent
| APIFileUploadComponent
| APIRadioGroupComponent
| APISelectMenuComponent
| APITextInputComponent;
/**
* @see {@link https://discord.com/developers/docs/components/reference#section}