For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Sign in
DocsAPI ReferenceChangelog
DocsAPI ReferenceChangelog
  • Get started
    • Quickstart
    • Concepts
  • Guides
    • Environments
  • Reference
        • Checkbox
        • Code
        • Color
        • Combobox
        • Group
        • Image
        • Font
        • Link
        • List
        • Number
        • Rich Text
        • Select
        • Slot
        • Style
        • Text Area
        • Text Input
      • Makeswift API Handler
    • Product docs
    • Blog
    • Support
Sign in
LogoLogo
On this page
  • Params
  • Prop type
  • Examples
  • An array of strings
  • An array of objects
Reference@makeswift/runtimeControls

List

Was this page helpful?
Previous

Link

Next

Number

Built with

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

Params

type
ControlRequired

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

label
stringDefaults to 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.

1import { List, TextInput } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Accordions } from "./Accordions";
6
7runtime.registerComponent(Accordions, {
8  type: "accordions",
9  label: "Accordions",
10  props: {
11    accordionTitles: List({
12      label: "Accordions",
13      type: TextInput({ label: "Title", defaultValue: "Accordion Title" }),
14      getItemLabel(item) {
15        return item ?? "Accordion Title";
16      },
17    }),
18  },
19});

An array of objects

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

1import { runtime } from "../../../../../lib/makeswift/runtime";
2import { List, Group, TextInput, TextArea } from "@makeswift/runtime/controls";
3
4import { Accordions } from "./Accordions";
5
6runtime.registerComponent(Accordions, {
7  type: "accordions",
8  label: "Accordions",
9  props: {
10    accordions: List({
11      label: "Accordions",
12      type: Group({
13        props: {
14          title: TextInput({ label: "Title", defaultValue: "Accordion Title" }),
15          body: TextArea({ label: "Body", defaultValue: "This is the body!" }),
16        },
17      }),
18      getItemLabel(item) {
19        return item ?? "Accordion Title";
20      },
21    }),
22  },
23});

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