Comprehensive TypeScript type definitions for building Slack applications and integrations with the Node Slack SDK
94
Interactive elements enable user input and interaction within Slack interfaces. These components can be used in actions blocks, input blocks, and as accessories in section blocks.
Interactive button for user actions with customizable styling and confirmation dialogs.
interface Button extends Actionable, Confirmable {
type: 'button';
text: PlainTextElement;
value?: string;
url?: string;
style?: ColorScheme;
accessibility_label?: string;
}Usage Example:
import { Button } from "@slack/types";
const button: Button = {
type: "button",
text: {
type: "plain_text",
text: "Approve Request"
},
value: "approve_123",
action_id: "approve_action",
style: "primary",
confirm: {
title: {
type: "plain_text",
text: "Confirm Approval"
},
text: {
type: "plain_text",
text: "Are you sure you want to approve this request?"
},
confirm: {
type: "plain_text",
text: "Yes, approve"
},
deny: {
type: "plain_text",
text: "Cancel"
}
}
};Single-line or multi-line text input with validation options.
interface PlainTextInput extends Actionable, Dispatchable, Focusable, Placeholdable {
type: 'plain_text_input';
initial_value?: string;
multiline?: boolean;
min_length?: number;
max_length?: number;
}Specialized input for email addresses with built-in validation.
interface EmailInput extends Actionable, Dispatchable, Focusable, Placeholdable {
type: 'email_text_input';
initial_value?: string;
}Input field specifically for URLs with validation.
interface URLInput extends Actionable, Dispatchable, Focusable, Placeholdable {
type: 'url_text_input';
initial_value?: string;
}Numeric input with decimal support and min/max validation.
interface NumberInput extends Actionable, Dispatchable, Focusable, Placeholdable {
type: 'number_input';
is_decimal_allowed: boolean;
initial_value?: string;
min_value?: string;
max_value?: string;
}Select menu with predefined list of options.
interface StaticSelect extends Actionable, Confirmable, Focusable, Placeholdable {
type: 'static_select';
initial_option?: PlainTextOption;
options?: PlainTextOption[];
option_groups?: {
label: PlainTextElement;
options: PlainTextOption[];
}[];
}Select menu populated with workspace users.
interface UsersSelect extends Actionable, Confirmable, Focusable, Placeholdable {
type: 'users_select';
initial_user?: string;
}Select menu for channels, DMs, and group messages with filtering options.
interface ConversationsSelect extends Actionable, Confirmable, Focusable, Placeholdable, URLRespondable {
type: 'conversations_select';
initial_conversation?: string;
default_to_current_conversation?: boolean;
filter?: {
include?: ('im' | 'mpim' | 'private' | 'public')[];
exclude_external_shared_channels?: boolean;
exclude_bot_users?: boolean;
};
}Select menu for public channels only.
interface ChannelsSelect extends Actionable, Confirmable, Focusable, Placeholdable, URLRespondable {
type: 'channels_select';
initial_channel?: string;
}Select menu with external data source and dynamic loading.
interface ExternalSelect extends Actionable, Confirmable, Focusable, Placeholdable {
type: 'external_select';
initial_option?: PlainTextOption;
min_query_length?: number;
}Multi-select with predefined options.
interface MultiStaticSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
type: 'multi_static_select';
initial_options?: PlainTextOption[];
options?: PlainTextOption[];
option_groups?: {
label: PlainTextElement;
options: PlainTextOption[];
}[];
}Multi-select for choosing multiple users.
interface MultiUsersSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
type: 'multi_users_select';
initial_users?: string[];
}Multi-select for choosing multiple conversations.
interface MultiConversationsSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
type: 'multi_conversations_select';
initial_conversations?: string[];
default_to_current_conversation?: boolean;
filter?: {
include?: ('im' | 'mpim' | 'private' | 'public')[];
exclude_external_shared_channels?: boolean;
exclude_bot_users?: boolean;
};
}Multi-select for public channels.
interface MultiChannelsSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
type: 'multi_channels_select';
initial_channels?: string[];
}Multi-select with external data source.
interface MultiExternalSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
type: 'multi_external_select';
initial_options?: PlainTextOption[];
min_query_length?: number;
}Single-choice radio button group.
interface RadioButtons extends Actionable, Confirmable, Focusable {
type: 'radio_buttons';
initial_option?: Option;
options: Option[];
}Multi-choice checkbox group.
interface Checkboxes extends Actionable, Confirmable, Focusable {
type: 'checkboxes';
initial_options?: Option[];
options: Option[];
}Calendar-style date selection.
interface Datepicker extends Actionable, Confirmable, Focusable, Placeholdable {
type: 'datepicker';
initial_date?: string;
}Time selection with timezone support.
interface Timepicker extends Actionable, Confirmable, Focusable, Placeholdable {
type: 'timepicker';
initial_time?: string;
timezone?: string;
}Combined date and time selection.
interface DateTimepicker extends Actionable, Confirmable, Focusable {
type: 'datetimepicker';
initial_date_time?: number;
}File upload element with type filtering and file count limits.
interface FileInput extends Actionable {
type: 'file_input';
filetypes?: string[];
max_files?: number;
}Compact overflow menu with up to 5 options.
interface Overflow extends Actionable, Confirmable {
type: 'overflow';
options: PlainTextOption[];
}WYSIWYG rich text editor input.
interface RichTextInput extends Actionable, Dispatchable, Focusable, Placeholdable {
type: 'rich_text_input';
initial_value?: RichTextBlock;
}Button that triggers workflow link triggers with customizable inputs.
interface WorkflowButton extends Confirmable {
type: 'workflow_button';
text: PlainTextElement;
workflow: {
trigger: {
url: string;
customizable_input_parameters?: {
name: string;
value: string;
}[];
};
};
style?: ColorScheme;
accessibility_label?: string;
}Image display element for use in contexts and as accessories.
type ImageElement = {
type: 'image';
alt_text: string;
} & (UrlImageObject | SlackFileImageObject);Rich text sub-elements for use within rich text blocks and inputs:
interface RichTextText extends RichTextStyleable {
type: 'text';
text: string;
}
interface RichTextLink extends RichTextStyleable {
type: 'link';
text?: string;
unsafe?: boolean;
url: string;
}interface RichTextUserMention extends RichTextStyleable {
type: 'user';
user_id: string;
}
interface RichTextChannelMention extends RichTextStyleable {
type: 'channel';
channel_id: string;
}
interface RichTextBroadcastMention extends RichTextStyleable {
type: 'broadcast';
range: 'here' | 'channel' | 'everyone';
}
interface RichTextTeamMention extends RichTextStyleable {
type: 'team';
team_id: string;
}
interface RichTextUsergroupMention extends RichTextStyleable {
type: 'usergroup';
usergroup_id: string;
}interface RichTextEmoji extends RichTextStyleable {
type: 'emoji';
name: string;
unicode?: string;
url?: string;
}
interface RichTextDate extends RichTextStyleable {
type: 'date';
timestamp: number;
format: string;
url?: string;
fallback?: string;
}
interface RichTextColor extends RichTextStyleable {
type: 'color';
value: string;
}interface RichTextSection {
type: 'rich_text_section';
elements: RichTextElement[];
}
interface RichTextList extends RichTextBorderable {
type: 'rich_text_list';
elements: RichTextSection[];
style: 'bullet' | 'ordered';
indent?: number;
}
interface RichTextQuote extends RichTextBorderable {
type: 'rich_text_quote';
elements: RichTextElement[];
}
interface RichTextPreformatted extends RichTextBorderable {
type: 'rich_text_preformatted';
elements: (RichTextText | RichTextLink)[];
}type Select = UsersSelect | StaticSelect | ConversationsSelect | ChannelsSelect | ExternalSelect;
type MultiSelect = MultiUsersSelect | MultiStaticSelect | MultiConversationsSelect | MultiChannelsSelect | MultiExternalSelect;
type RichTextElement = RichTextBroadcastMention | RichTextColor | RichTextChannelMention | RichTextDate | RichTextEmoji | RichTextLink | RichTextTeamMention | RichTextText | RichTextUserMention | RichTextUsergroupMention;Install with Tessl CLI
npx tessl i tessl/npm-slack--typesdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10