CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-slack--types

Comprehensive TypeScript type definitions for building Slack applications and integrations with the Node Slack SDK

94

1.11x
Overview
Eval results
Files

interactive-elements.mddocs/

Interactive Elements

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.

Capabilities

Button Element

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

Text Input Elements

Plain Text Input

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

Email Input

Specialized input for email addresses with built-in validation.

interface EmailInput extends Actionable, Dispatchable, Focusable, Placeholdable {
  type: 'email_text_input';
  initial_value?: string;
}

URL Input

Input field specifically for URLs with validation.

interface URLInput extends Actionable, Dispatchable, Focusable, Placeholdable {
  type: 'url_text_input';
  initial_value?: string;
}

Number Input

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 Elements

Static Select

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[];
  }[];
}

Users Select

Select menu populated with workspace users.

interface UsersSelect extends Actionable, Confirmable, Focusable, Placeholdable {
  type: 'users_select';
  initial_user?: string;
}

Conversations Select

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

Channels Select

Select menu for public channels only.

interface ChannelsSelect extends Actionable, Confirmable, Focusable, Placeholdable, URLRespondable {
  type: 'channels_select';
  initial_channel?: string;
}

External Select

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 Elements

Multi-Static Select

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-Users Select

Multi-select for choosing multiple users.

interface MultiUsersSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
  type: 'multi_users_select';
  initial_users?: string[];
}

Multi-Conversations Select

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-Channels Select

Multi-select for public channels.

interface MultiChannelsSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
  type: 'multi_channels_select';
  initial_channels?: string[];
}

Multi-External Select

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

Choice Elements

Radio Buttons

Single-choice radio button group.

interface RadioButtons extends Actionable, Confirmable, Focusable {
  type: 'radio_buttons';
  initial_option?: Option;
  options: Option[];
}

Checkboxes

Multi-choice checkbox group.

interface Checkboxes extends Actionable, Confirmable, Focusable {
  type: 'checkboxes';
  initial_options?: Option[];
  options: Option[];
}

Date and Time Elements

Date Picker

Calendar-style date selection.

interface Datepicker extends Actionable, Confirmable, Focusable, Placeholdable {
  type: 'datepicker';
  initial_date?: string;
}

Time Picker

Time selection with timezone support.

interface Timepicker extends Actionable, Confirmable, Focusable, Placeholdable {
  type: 'timepicker';
  initial_time?: string;
  timezone?: string;
}

Date-Time Picker

Combined date and time selection.

interface DateTimepicker extends Actionable, Confirmable, Focusable {
  type: 'datetimepicker';
  initial_date_time?: number;
}

File Input

File upload element with type filtering and file count limits.

interface FileInput extends Actionable {
  type: 'file_input';
  filetypes?: string[];
  max_files?: number;
}

Overflow Menu

Compact overflow menu with up to 5 options.

interface Overflow extends Actionable, Confirmable {
  type: 'overflow';
  options: PlainTextOption[];
}

Rich Text Input

WYSIWYG rich text editor input.

interface RichTextInput extends Actionable, Dispatchable, Focusable, Placeholdable {
  type: 'rich_text_input';
  initial_value?: RichTextBlock;
}

Workflow Button

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 Element

Image display element for use in contexts and as accessories.

type ImageElement = {
  type: 'image';
  alt_text: string;
} & (UrlImageObject | SlackFileImageObject);

Rich Text Elements

Rich text sub-elements for use within rich text blocks and inputs:

Text Elements

interface RichTextText extends RichTextStyleable {
  type: 'text';
  text: string;
}

interface RichTextLink extends RichTextStyleable {
  type: 'link';
  text?: string;
  unsafe?: boolean;
  url: string;
}

Mention Elements

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

Other Rich Text Elements

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

Rich Text Containers

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 Unions

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--types

docs

block-kit.md

calls.md

dialog.md

events.md

index.md

interactive-elements.md

message-attachments.md

message-metadata.md

views.md

tile.json