Skip to content
Block Kit for React
Esc
↑↓navigate↵open⌘Jpreview
On this page

Text inputs

Single-line and multi-line text fields, plus email, URL and number variants, for collecting free text in a modal or Home tab.

plain_text_input collects free text. Slack also ships three constrained variants that render the same control with a different keyboard and, for email and URL, a small leading icon: email_text_input, url_text_input and number_input. All four are input-block-only elements: they don’t appear in an actions block or as a section accessory.

New task

Title

Fields

PropType
type"plain_text_input" | "email_text_input" | "url_text_input" | "number_input"

Which variant to render. All four share the fields below.

Type"plain_text_input" | "email_text_input" | "url_text_input" | "number_input"
action_id?string

Identifies this action in the interaction payload and as the key in `state.values`. Maximum length is 255 characters.

Typestring
initial_value?string

The value shown when the surface loads.

Typestring
placeholder?PlainTextElement

Grey placeholder text shown when the field is empty. Maximum length is 150 characters.

TypePlainTextElement
multiline?boolean

`plain_text_input` only. Renders a resizable textarea instead of a single-line field.

Typeboolean
Defaultfalse
min_length?number

`plain_text_input` only. Minimum number of characters required on submit. Maximum value is 3000.

Typenumber
max_length?number

`plain_text_input` only. Maximum number of characters allowed.

Typenumber
is_decimal_allowed?boolean

`number_input` only. Allows a decimal point when `true`; otherwise only whole numbers can be typed. Required for this variant.

Typeboolean
min_value?string

`number_input` only. The smallest value allowed; cannot be greater than `max_value`.

Typestring
max_value?string

`number_input` only. The largest value allowed; cannot be less than `min_value`.

Typestring
dispatch_action_config?DispatchActionConfig

Configures which keystrokes fire a `block_actions` payload while typing. See Dispatching actions below.

TypeDispatchActionConfig
focus_on_load?boolean

Focuses this field when the surface loads. Only one element per view can set this.

Typeboolean
Defaultfalse

Examples

Single line vs. multiline

Your AppAPP
Feedback

Setting multiline: true swaps the single-line field for a textarea that grows with the content. Pressing Enter inside a multiline field inserts a newline instead of submitting.

Email, URL and number variants

Your AppAPP
Email address
We'll only use this for receipts.
Website
Quantity

email_text_input and url_text_input show a small envelope or link icon inside the field. number_input restricts what can be typed to digits (and, with is_decimal_allowed: true, a single decimal point), Slack rejects the keystroke rather than showing it and clearing it.

Dispatching actions as you type

By default, an input block’s element only reports its value into state.values, which your app reads when the surface is submitted. Typing doesn’t fire an action. Set the block’s dispatch_action: true and, optionally, the element’s dispatch_action_config to get a live block_actions payload while the person types:

Your AppAPP
Search
onActionInteract with the preview.

trigger_actions_on accepts on_enter_pressed (the default) and on_character_entered. With the default, single-line fields also pick up a “Press ‘enter’ to submit” hint automatically, unless the block already has its own hint. Multiline fields never show it, since Enter inserts a newline there instead of submitting.

Initial value

The Website field above starts pre-filled with https://example.com via initial_value. Slack reports the initial value into state.values as soon as the surface loads, before any typing.

Interactivity

With dispatch_action set, every trigger calls onAction with the current text as value:

{
  "type": "plain_text_input",
  "action_id": "search_input",
  "block_id": "search",
  "action_ts": "1706000000.000100",
  "value": "rel"
}

Reading the value

Every keystroke (and the initial value, if any) is written to state.values in Slack’s { type, value } shape, keyed by the element’s variant type:

{
  "email": {
    "email_input": { "type": "email_text_input", "value": "name@example.com" }
  }
}

Was this page helpful?