Modals
Modal form components for collecting user input.
Modals display form dialogs that collect structured user input. Currently supported on Slack.
import { Modal, TextInput, Select, RadioSelect, SelectOption } from "chat";Modal
Top-level container for a form dialog. Open a modal from an onAction or onSlashCommand handler using event.openModal().
bot.onAction("open-form", async (event) => {
await event.openModal(
Modal({
callbackId: "feedback",
title: "Submit Feedback",
submitLabel: "Send",
children: [
TextInput({ id: "comment", label: "Comment", multiline: true }),
],
})
);
});Prop
Type
TextInput
A text input field.
TextInput({
id: "name",
label: "Your name",
placeholder: "Enter your name",
})
TextInput({
id: "description",
label: "Description",
multiline: true,
maxLength: 500,
optional: true,
})Prop
Type
Select
Dropdown menu.
Select({
id: "priority",
label: "Priority",
placeholder: "Select priority",
options: [
SelectOption({ label: "High", value: "high", description: "Urgent tasks" }),
SelectOption({ label: "Medium", value: "medium" }),
SelectOption({ label: "Low", value: "low" }),
],
})Prop
Type
RadioSelect
Radio button group for mutually exclusive choices.
RadioSelect({
id: "status",
label: "Status",
options: [
SelectOption({ label: "Open", value: "open" }),
SelectOption({ label: "Closed", value: "closed" }),
],
})Same props as Select (except placeholder).
SelectOption
An option used inside Select and RadioSelect.
SelectOption({ label: "High", value: "high", description: "Urgent tasks" })Prop
Type
ModalChild types
The children array in Modal accepts these element types:
| Type | Created by |
|---|---|
TextInputElement | TextInput() |
SelectElement | Select() |
RadioSelectElement | RadioSelect() |
TextElement | Text() — static text content |
FieldsElement | Fields() — key-value display |