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

# List

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

<Frame type="glass" caption="">
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/list-panel.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=e8cdb33e0ee280eead88786084cff38c" width="1357" height="848" data-path="images/list-panel.png" />
</Frame>

## Params

<ParamField query="type" 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.
</ParamField>

<ParamField query="label" type="string" default="List">
  Text for the panel label that appears in the Makeswift builder.
</ParamField>

<ParamField query="description" type="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).
</ParamField>

<ParamField query="getItemLabel" type="(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.
</ParamField>

## 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.

<CodeGroup>
  ```tsx Accordions.makeswift.ts theme={null}
  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";
        },
      }),
    },
  });
  ```

  ```tsx Accordions.tsx theme={null}
  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>
    );
  }
  ```
</CodeGroup>

### An array of objects

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

<CodeGroup>
  ```tsx Accordions.makeswift.ts theme={null}
  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";
        },
      }),
    },
  });
  ```

  ```tsx Accordions.tsx theme={null}
  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>
    );
  }
  ```
</CodeGroup>

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