---
title: Section
description: A text block that can pair with fields or a single accessory element, and the block you'll reach for most often.
---

A section is the most flexible block in Block Kit. It shows a block of text, or up to 10
short fields laid out in two columns, and can add one interactive or decorative element
alongside as an `accessory`.

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "This is a section block with a button.",
        },
        accessory: {
          type: "button",
          text: { type: "plain_text", text: "Click Me", emoji: true },
          value: "click_me_123",
          action_id: "button-action",
        },
      },
    ],
  }}
/>

## Fields

| Prop | Type | Default | Description |
| - | - | - | - |
| `type` | `string` | - | Always `"section"`. |
| `text?` | `text object` | - | The text to show, as a `plain_text` or `mrkdwn` text object. Required unless `fields` is set. 1–3000 characters. |
| `fields?` | `text object[]` | - | Text objects rendered as two side-by-side columns. Required if `text` is omitted. Slack allows up to 10 fields, each up to 2000 characters. |
| `accessory?` | `element` | - | One element shown alongside the text: a button, select, checkboxes, radio buttons, date/time picker, overflow menu, or image. |
| `expand?` | `boolean` | `false` | When `true`, long text always renders in full. When `false` or omitted, text past a few lines collapses behind a "Show more" toggle. |
| `block_id?` | `string` | - | A unique identifier for the block, up to 255 characters. Slack generates one if omitted. |

## Examples

### Plain text

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: {
          type: "plain_text",
          text: "This is a plain text section block.",
          emoji: true,
        },
      },
    ],
  }}
/>

### Markdown text

`mrkdwn` text supports bold, strikethrough, links, and emoji shortcodes.

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>",
        },
      },
    ],
  }}
/>

### Fields

Fields render as two columns. Combine `text` and `fields` on the same section to pair a
summary line with structured details.

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: { type: "mrkdwn", text: "*Order #1042* is ready for review." },
        fields: [
          { type: "mrkdwn", text: "*Customer*\nAda Lovelace" },
          { type: "mrkdwn", text: "*Total*\n$1,234.00" },
          { type: "plain_text", text: "Plain field :tada:", emoji: true },
        ],
      },
    ],
  }}
/>

### Accessories

Buttons, selects, and other elements sit to the right of the text. `checkboxes` and
`radio_buttons` are the exception: Slack stacks those full-width below the text instead.

**Select menu**

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: { type: "mrkdwn", text: "Pick an item from the dropdown list" },
        accessory: {
          type: "static_select",
          placeholder: { type: "plain_text", text: "Select an item", emoji: true },
          options: [
            { text: { type: "plain_text", text: "Apple", emoji: true }, value: "value-0" },
            { text: { type: "plain_text", text: "Banana", emoji: true }, value: "value-1" },
            { text: { type: "plain_text", text: "Cherry", emoji: true }, value: "value-2" },
          ],
          action_id: "static_select-action",
        },
      },
    ],
  }}
/>

**Overflow menu**

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: { type: "mrkdwn", text: "This is a section block with an overflow menu." },
        accessory: {
          type: "overflow",
          options: [
            { text: { type: "plain_text", text: "Edit", emoji: true }, value: "value-0" },
            { text: { type: "plain_text", text: "Duplicate", emoji: true }, value: "value-1" },
            { text: { type: "plain_text", text: "Archive", emoji: true }, value: "value-2" },
          ],
          action_id: "overflow-action",
        },
      },
    ],
  }}
/>

**Checkboxes**

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: { type: "mrkdwn", text: "This is a section block with checkboxes." },
        accessory: {
          type: "checkboxes",
          options: [
            {
              text: { type: "mrkdwn", text: "*this is mrkdwn text*" },
              description: { type: "mrkdwn", text: "*this is mrkdwn text*" },
              value: "value-0",
            },
            {
              text: { type: "mrkdwn", text: "*this is mrkdwn text*" },
              description: { type: "mrkdwn", text: "*this is mrkdwn text*" },
              value: "value-1",
            },
          ],
          action_id: "checkboxes-action",
        },
      },
    ],
  }}
/>

**Date picker**

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: { type: "mrkdwn", text: "Pick a date for the deadline." },
        accessory: {
          type: "datepicker",
          initial_date: "1990-04-28",
          placeholder: { type: "plain_text", text: "Select a date", emoji: true },
          action_id: "datepicker-action",
        },
      },
    ],
  }}
/>

**Image**

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "*Farmhouse Thai Cuisine*\n:star::star::star::star: 1528 reviews",
        },
        accessory: {
          type: "image",
          image_url: "https://api.slack.com/img/blocks/bkb_template_images/beagle.png",
          alt_text: "alt text for image",
        },
      },
    ],
  }}
/>

### Long text with `expand`

Text past roughly 300 characters collapses behind a "Show more" toggle unless `expand` is
set to `true`.

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "This is a long line of mrkdwn text meant to demonstrate the automatic text clamping behavior when the text is really long, sometimes people wanna post a lot of text and that's when this really shows its value, so with this change, the text will be clamped after five lines of text, and will present a show more button to expand the text block.",
        },
      },
    ],
  }}
/>

Set `expand: true` on the same block and the full text renders with no toggle.

## Interactivity

Every accessory that can act reports through `onAction` with the block's `block_id`, the
element's `action_id`, and a payload shaped for that element type.

<Preview
  payload={{
    blocks: [
      {
        type: "section",
        text: { type: "mrkdwn", text: "Assign this to a teammate." },
        accessory: {
          type: "users_select",
          placeholder: { type: "plain_text", text: "Select a user", emoji: true },
          action_id: "assignee-select",
        },
      },
    ],
  }}
  actions
/>

A `users_select` selection dispatches:

```json
{
  "type": "users_select",
  "block_id": "…",
  "action_id": "assignee-select",
  "selected_user": "U0ADA",
  "action_ts": "…"
}
```

Buttons include `value` (and `url`/`style` when set); other selects include
`selected_option`, `selected_options`, `selected_date`, or `selected_conversation` in place
of `selected_user`, matching the field Slack documents for that element.

## Related

**[Header](/blocks/header)**

A bold, single-line title block.

**[Actions](/blocks/actions)**

A row of interactive elements on their own.

**[Context](/blocks/context)**

Small, muted supplementary text or images.

**[Input](/blocks/input)**

Collect input inside a modal or workflow step.