0
# Interactive Elements
1

2
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.
3

4
## Capabilities
5

6
### Button Element
7

8
Interactive button for user actions with customizable styling and confirmation dialogs.
9

10
```typescript { .api }
11
interface Button extends Actionable, Confirmable {
12
  type: 'button';
13
  text: PlainTextElement;
14
  value?: string;
15
  url?: string;
16
  style?: ColorScheme;
17
  accessibility_label?: string;
18
}
19
```
20

21
**Usage Example:**
22

23
```typescript
24
import { Button } from "@slack/types";
25

26
const button: Button = {
27
  type: "button",
28
  text: {
29
    type: "plain_text",
30
    text: "Approve Request"
31
  },
32
  value: "approve_123",
33
  action_id: "approve_action",
34
  style: "primary",
35
  confirm: {
36
    title: {
37
      type: "plain_text",
38
      text: "Confirm Approval"
39
    },
40
    text: {
41
      type: "plain_text",
42
      text: "Are you sure you want to approve this request?"
43
    },
44
    confirm: {
45
      type: "plain_text",
46
      text: "Yes, approve"
47
    },
48
    deny: {
49
      type: "plain_text",
50
      text: "Cancel"
51
    }
52
  }
53
};
54
```
55

56
### Text Input Elements
57

58
#### Plain Text Input
59

60
Single-line or multi-line text input with validation options.
61

62
```typescript { .api }
63
interface PlainTextInput extends Actionable, Dispatchable, Focusable, Placeholdable {
64
  type: 'plain_text_input';
65
  initial_value?: string;
66
  multiline?: boolean;
67
  min_length?: number;
68
  max_length?: number;
69
}
70
```
71

72
#### Email Input
73

74
Specialized input for email addresses with built-in validation.
75

76
```typescript { .api }
77
interface EmailInput extends Actionable, Dispatchable, Focusable, Placeholdable {
78
  type: 'email_text_input';
79
  initial_value?: string;
80
}
81
```
82

83
#### URL Input
84

85
Input field specifically for URLs with validation.
86

87
```typescript { .api }
88
interface URLInput extends Actionable, Dispatchable, Focusable, Placeholdable {
89
  type: 'url_text_input';
90
  initial_value?: string;
91
}
92
```
93

94
#### Number Input
95

96
Numeric input with decimal support and min/max validation.
97

98
```typescript { .api }
99
interface NumberInput extends Actionable, Dispatchable, Focusable, Placeholdable {
100
  type: 'number_input';
101
  is_decimal_allowed: boolean;
102
  initial_value?: string;
103
  min_value?: string;
104
  max_value?: string;
105
}
106
```
107

108
### Select Menu Elements
109

110
#### Static Select
111

112
Select menu with predefined list of options.
113

114
```typescript { .api }
115
interface StaticSelect extends Actionable, Confirmable, Focusable, Placeholdable {
116
  type: 'static_select';
117
  initial_option?: PlainTextOption;
118
  options?: PlainTextOption[];
119
  option_groups?: {
120
    label: PlainTextElement;
121
    options: PlainTextOption[];
122
  }[];
123
}
124
```
125

126
#### Users Select
127

128
Select menu populated with workspace users.
129

130
```typescript { .api }
131
interface UsersSelect extends Actionable, Confirmable, Focusable, Placeholdable {
132
  type: 'users_select';
133
  initial_user?: string;
134
}
135
```
136

137
#### Conversations Select
138

139
Select menu for channels, DMs, and group messages with filtering options.
140

141
```typescript { .api }
142
interface ConversationsSelect extends Actionable, Confirmable, Focusable, Placeholdable, URLRespondable {
143
  type: 'conversations_select';
144
  initial_conversation?: string;
145
  default_to_current_conversation?: boolean;
146
  filter?: {
147
    include?: ('im' | 'mpim' | 'private' | 'public')[];
148
    exclude_external_shared_channels?: boolean;
149
    exclude_bot_users?: boolean;
150
  };
151
}
152
```
153

154
#### Channels Select
155

156
Select menu for public channels only.
157

158
```typescript { .api }
159
interface ChannelsSelect extends Actionable, Confirmable, Focusable, Placeholdable, URLRespondable {
160
  type: 'channels_select';
161
  initial_channel?: string;
162
}
163
```
164

165
#### External Select
166

167
Select menu with external data source and dynamic loading.
168

169
```typescript { .api }
170
interface ExternalSelect extends Actionable, Confirmable, Focusable, Placeholdable {
171
  type: 'external_select';
172
  initial_option?: PlainTextOption;
173
  min_query_length?: number;
174
}
175
```
176

177
### Multi-Select Elements
178

179
#### Multi-Static Select
180

181
Multi-select with predefined options.
182

183
```typescript { .api }
184
interface MultiStaticSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
185
  type: 'multi_static_select';
186
  initial_options?: PlainTextOption[];
187
  options?: PlainTextOption[];
188
  option_groups?: {
189
    label: PlainTextElement;
190
    options: PlainTextOption[];
191
  }[];
192
}
193
```
194

195
#### Multi-Users Select
196

197
Multi-select for choosing multiple users.
198

199
```typescript { .api }
200
interface MultiUsersSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
201
  type: 'multi_users_select';
202
  initial_users?: string[];
203
}
204
```
205

206
#### Multi-Conversations Select
207

208
Multi-select for choosing multiple conversations.
209

210
```typescript { .api }
211
interface MultiConversationsSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
212
  type: 'multi_conversations_select';
213
  initial_conversations?: string[];
214
  default_to_current_conversation?: boolean;
215
  filter?: {
216
    include?: ('im' | 'mpim' | 'private' | 'public')[];
217
    exclude_external_shared_channels?: boolean;
218
    exclude_bot_users?: boolean;
219
  };
220
}
221
```
222

223
#### Multi-Channels Select
224

225
Multi-select for public channels.
226

227
```typescript { .api }
228
interface MultiChannelsSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
229
  type: 'multi_channels_select';
230
  initial_channels?: string[];
231
}
232
```
233

234
#### Multi-External Select
235

236
Multi-select with external data source.
237

238
```typescript { .api }
239
interface MultiExternalSelect extends Actionable, Confirmable, Focusable, MaxItemsSelectable, Placeholdable {
240
  type: 'multi_external_select';
241
  initial_options?: PlainTextOption[];
242
  min_query_length?: number;
243
}
244
```
245

246
### Choice Elements
247

248
#### Radio Buttons
249

250
Single-choice radio button group.
251

252
```typescript { .api }
253
interface RadioButtons extends Actionable, Confirmable, Focusable {
254
  type: 'radio_buttons';
255
  initial_option?: Option;
256
  options: Option[];
257
}
258
```
259

260
#### Checkboxes
261

262
Multi-choice checkbox group.
263

264
```typescript { .api }
265
interface Checkboxes extends Actionable, Confirmable, Focusable {
266
  type: 'checkboxes';
267
  initial_options?: Option[];
268
  options: Option[];
269
}
270
```
271

272
### Date and Time Elements
273

274
#### Date Picker
275

276
Calendar-style date selection.
277

278
```typescript { .api }
279
interface Datepicker extends Actionable, Confirmable, Focusable, Placeholdable {
280
  type: 'datepicker';
281
  initial_date?: string;
282
}
283
```
284

285
#### Time Picker
286

287
Time selection with timezone support.
288

289
```typescript { .api }
290
interface Timepicker extends Actionable, Confirmable, Focusable, Placeholdable {
291
  type: 'timepicker';
292
  initial_time?: string;
293
  timezone?: string;
294
}
295
```
296

297
#### Date-Time Picker
298

299
Combined date and time selection.
300

301
```typescript { .api }
302
interface DateTimepicker extends Actionable, Confirmable, Focusable {
303
  type: 'datetimepicker';
304
  initial_date_time?: number;
305
}
306
```
307

308
### File Input
309

310
File upload element with type filtering and file count limits.
311

312
```typescript { .api }
313
interface FileInput extends Actionable {
314
  type: 'file_input';
315
  filetypes?: string[];
316
  max_files?: number;
317
}
318
```
319

320
### Overflow Menu
321

322
Compact overflow menu with up to 5 options.
323

324
```typescript { .api }
325
interface Overflow extends Actionable, Confirmable {
326
  type: 'overflow';
327
  options: PlainTextOption[];
328
}
329
```
330

331
### Rich Text Input
332

333
WYSIWYG rich text editor input.
334

335
```typescript { .api }
336
interface RichTextInput extends Actionable, Dispatchable, Focusable, Placeholdable {
337
  type: 'rich_text_input';
338
  initial_value?: RichTextBlock;
339
}
340
```
341

342
### Workflow Button
343

344
Button that triggers workflow link triggers with customizable inputs.
345

346
```typescript { .api }
347
interface WorkflowButton extends Confirmable {
348
  type: 'workflow_button';
349
  text: PlainTextElement;
350
  workflow: {
351
    trigger: {
352
      url: string;
353
      customizable_input_parameters?: {
354
        name: string;
355
        value: string;
356
      }[];
357
    };
358
  };
359
  style?: ColorScheme;
360
  accessibility_label?: string;
361
}
362
```
363

364
### Image Element
365

366
Image display element for use in contexts and as accessories.
367

368
```typescript { .api }
369
type ImageElement = {
370
  type: 'image';
371
  alt_text: string;
372
} & (UrlImageObject | SlackFileImageObject);
373
```
374

375
## Rich Text Elements
376

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

379
### Text Elements
380

381
```typescript { .api }
382
interface RichTextText extends RichTextStyleable {
383
  type: 'text';
384
  text: string;
385
}
386

387
interface RichTextLink extends RichTextStyleable {
388
  type: 'link';
389
  text?: string;
390
  unsafe?: boolean;
391
  url: string;
392
}
393
```
394

395
### Mention Elements
396

397
```typescript { .api }
398
interface RichTextUserMention extends RichTextStyleable {
399
  type: 'user';
400
  user_id: string;
401
}
402

403
interface RichTextChannelMention extends RichTextStyleable {
404
  type: 'channel';
405
  channel_id: string;
406
}
407

408
interface RichTextBroadcastMention extends RichTextStyleable {
409
  type: 'broadcast';
410
  range: 'here' | 'channel' | 'everyone';
411
}
412

413
interface RichTextTeamMention extends RichTextStyleable {
414
  type: 'team';
415
  team_id: string;
416
}
417

418
interface RichTextUsergroupMention extends RichTextStyleable {
419
  type: 'usergroup';
420
  usergroup_id: string;
421
}
422
```
423

424
### Other Rich Text Elements
425

426
```typescript { .api }
427
interface RichTextEmoji extends RichTextStyleable {
428
  type: 'emoji';
429
  name: string;
430
  unicode?: string;
431
  url?: string;
432
}
433

434
interface RichTextDate extends RichTextStyleable {
435
  type: 'date';
436
  timestamp: number;
437
  format: string;
438
  url?: string;
439
  fallback?: string;
440
}
441

442
interface RichTextColor extends RichTextStyleable {
443
  type: 'color';
444
  value: string;
445
}
446
```
447

448
### Rich Text Containers
449

450
```typescript { .api }
451
interface RichTextSection {
452
  type: 'rich_text_section';
453
  elements: RichTextElement[];
454
}
455

456
interface RichTextList extends RichTextBorderable {
457
  type: 'rich_text_list';
458
  elements: RichTextSection[];
459
  style: 'bullet' | 'ordered';
460
  indent?: number;
461
}
462

463
interface RichTextQuote extends RichTextBorderable {
464
  type: 'rich_text_quote';
465
  elements: RichTextElement[];
466
}
467

468
interface RichTextPreformatted extends RichTextBorderable {
469
  type: 'rich_text_preformatted';
470
  elements: (RichTextText | RichTextLink)[];
471
}
472
```
473

474
## Type Unions
475

476
```typescript { .api }
477
type Select = UsersSelect | StaticSelect | ConversationsSelect | ChannelsSelect | ExternalSelect;
478

479
type MultiSelect = MultiUsersSelect | MultiStaticSelect | MultiConversationsSelect | MultiChannelsSelect | MultiExternalSelect;
480

481
type RichTextElement = RichTextBroadcastMention | RichTextColor | RichTextChannelMention | RichTextDate | RichTextEmoji | RichTextLink | RichTextTeamMention | RichTextText | RichTextUserMention | RichTextUsergroupMention;
482
```