> ## Documentation Index
> Fetch the complete documentation index at: https://docs.awaitio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Display Heading

> Shows a section title with an optional line under it.

`io.display.heading()` shows a title in a folder's page or in a step of an action, to split a long form or page into sections. It only displays and returns nothing. Provided by the `@awaitio/display-heading` package.

<Frame>
  <img src="https://mintcdn.com/awaitio/MjbT5AW66vMXbVck/images/io-display-heading.png?fit=max&auto=format&n=MjbT5AW66vMXbVck&q=85&s=62374c1e923243780ca10d711287a989" alt="A Review heading with a line of description under it, above two tiles and a text field" width="1404" height="688" data-path="images/io-display-heading.png" />
</Frame>

## Install

```bash theme={null}
npm install @awaitio/display-heading
```

## Setup

Register it under the key you want in `io`:

```ts app.ts {5} theme={null}
import { displayHeading } from '@awaitio/display-heading';

export const app = new AwaitIO({
  // name, actionsDirectory, theme, secret, users…
  components: { display: { heading: displayHeading } },
});
```

## Usage

```ts theme={null}
const { name, plan } = await io.group({
  company: io.display.heading('Company', { description: 'How the account is called and billed.' }),
  name: io.input.text('Name'),
  plan: io.select.single('Plan', { options: plans }),
});
```

The label is the title itself, drawn by the component rather than as a heading above it.

## Props

| Prop | Type | Required | Description |
| - | - | - | - |
| `description` | `string` | Optional | A line under the title, e.g. what the section is for. |
| `level` | `2 \| 3` | Optional | `2`, the default, is a section title bigger than the labels of the fields under it; `3` matches the headings above tables. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.