> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# List

> Adds a List panel in the Makeswift builder to visually edit an `array` of items.

Adds a List panel in the Makeswift builder to visually edit an `array` of items.

![](/_fern-img/2553e8ae943ac50d1bf8ca77ac6e0b0884ed1d44011cd430d93c875ba5b93715.webp)

## Params

**`type`** `Control` — required

The control that determines the type and values in the array passed to your
component. Can be any of the Makeswift controls.

---

**`label`** `string` — default: List

Text for the panel label that appears in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`getItemLabel`** `(item: T) => string`

A function to get the label for each list item shown in the panel. If you
don’t provide a value, the control passes an `undefined` value to your
component.

---

## Prop type

The Link control passes an `array` of values based on the `type` control.

## Examples

### An array of strings

This example adds an List control to the `accordionTitles` prop of an Accordions component.

**`Accordions.makeswift.ts`**

```tsx Accordions.makeswift.ts
import { List, TextInput } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Accordions } from "./Accordions";

runtime.registerComponent(Accordions, {
  type: "accordions",
  label: "Accordions",
  props: {
    accordionTitles: List({
      label: "Accordions",
      type: TextInput({ label: "Title", defaultValue: "Accordion Title" }),
      getItemLabel(item) {
        return item ?? "Accordion Title";
      },
    }),
  },
});
```

**`Accordions.tsx`**

```tsx Accordions.tsx
import { Accordion } from "@/components/Accordion";

interface Props {
  accordionTitles: string[];
}

export function Accordions({ accordionTitles }: Props) {
  return (
    <div className="grid gap-3">
      {accordionTitles.map((title, index) => (
        <Accordion key={index} title={title}>
          This is the body!
        </Accordion>
      ))}
    </div>
  );
}
```

### An array of objects

This example uses the [Group](/developer/docs/reference/controls/group) control to define the structure of the objects in the `accordions` array.

**`Accordions.makeswift.ts`**

```tsx Accordions.makeswift.ts
import { runtime } from "@/lib/makeswift/runtime";
import { List, Group, TextInput, TextArea } from "@makeswift/runtime/controls";

import { Accordions } from "./Accordions";

runtime.registerComponent(Accordions, {
  type: "accordions",
  label: "Accordions",
  props: {
    accordions: List({
      label: "Accordions",
      type: Group({
        props: {
          title: TextInput({ label: "Title", defaultValue: "Accordion Title" }),
          body: TextArea({ label: "Body", defaultValue: "This is the body!" }),
        },
      }),
      getItemLabel(item) {
        return item ?? "Accordion Title";
      },
    }),
  },
});
```

**`Accordions.tsx`**

```tsx Accordions.tsx
import { Accordion } from "@/components/Accordion";

interface Props {
  accordions: {
    title: string;
    body: string;
  }[];
}

export function Accordions({ accordionTitles }: Props) {
  return (
    <div className="grid gap-3">
      {accordions.map((accordion, index) => (
        <Accordion key={index} title={accordion.title}>
          {accordion.body}
        </Accordion>
      ))}
    </div>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).