List

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

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.

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

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";
      },
    }),
  },
});

An array of objects

This example uses the Group control to define the structure of the objects in the accordions array.

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";
      },
    }),
  },
});

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.