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

# Make a list addable

> Turn a list inside a component into one editors can add to, reorder and prune.

Editing the items of a list needs only anchors. Growing the list needs the schema to know what a new item looks like, so the Add form can ask for it. Two steps.

## 1. Anchor the list

`stageArray` on the element that holds the items, with the label the tab shows. Each item is a direct child of that element. Fields inside an item use their indexed path, `props.items.2.title`, so the editor can address one item.

```astro theme={null}
<ul class="grid gap-8 md:grid-cols-3" {...stageArray("props.items", "Add feature")}>
  {items.map((item, i) => (
    <li class="rounded-panel border border-border p-6">
      <h3 class="text-lg text-foreground" {...stagePath(`props.items.${i}.title`)}>{item.title}</h3>
      <p class="mt-2 text-muted" {...stagePath(`props.items.${i}.body`)}>{item.body}</p>
    </li>
  ))}
</ul>
```

Items get their own generated ids when they are added, so reordering and removing address the item, not its position.

## 2. Describe the item

In `lib/admin-schema.ts`, under `components`, keyed by the component type and the list's dotted path:

```ts theme={null}
"feature-grid": {
  arrays: {
    "props.items": {
      kind: "modal",              // the Add form opens in a panel
      addLabel: "Add feature",    // the tab's label
      title: "New feature",       // the panel's title
      noun: "feature",            // "Remove feature", "Adding feature…"
      reorderable: true,          // drag handles on hover
      form: [
        { key: "title", label: "Title", type: "text", required: true },
        { key: "body",  label: "Body",  type: "textarea" },
        { key: "icon",  label: "Icon",  type: "media", videoKey: "iconVideo" },
      ],
    },
  },
},
```

`form` is only for adding. Once an item exists, its anchored fields are edited in place. A field with no anchor, such as a link target, stays in the form and is edited from the item's cog.

## What editors get

In Edit mode the section's tab gains a **+**. Adding opens the form, then the item appears in place with no reload. Hover an item for its drag handle and its ×.

## Variations

| The list                                             | Do                                                                                                                                                                                        |
| ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Shows one item at a time, a carousel or tabs         | `reorderable: "strip"` so reorder happens in a thumbnail strip, and stamp `data-e-current` on the active item so the cog edits it. See [the edit notch](/developers/structure/edit-notch) |
| Has DOM that depends on the count, dots or a counter | `insert: "reload"` so an add re-renders the component                                                                                                                                     |
| Items are whole pages, projects or case studies      | `kind: "page"` with a `starter`. Each add creates a child page and links to it                                                                                                            |
| Items are blog posts                                 | `kind: "article"`. The list is query-driven, there is nothing to store. See [Blog](/developers/structure/blog)                                                                            |

## Next steps

<CardGroup cols={2}>
  <Card title="Page schemas" href="/developers/structure/schemas">
    Every key an array entry accepts.
  </Card>

  <Card title="The edit notch" href="/developers/structure/edit-notch">
    Where the add and settings affordances live.
  </Card>
</CardGroup>