fma-ds

Collection Field

A list edited in place inside a form: the user adds an item and fills it right there (payment methods, lots, recipients).

originalMITexperimentalChangelogRegistry JSON

Overview

Rows, state and validation stay in the app (useFieldArray's fields, append, remove).

  • `CollectionField`: takes the label (a legend), description, the list's error, itemCount, onAdd and addLabel. minItems removes the remove buttons at the minimum, maxItems swaps the add button for a note once reached, and an empty list shows emptyMessage.
  • `CollectionFieldItem`: label is numbered ("Lot 2") and also names its remove button; onRemove removes it. Two layouts: row for a few fields side by side on wide screens, with the remove button at the end; group for many fields under a visible legend with a static border, so items stay apart when fields stack on small screens.
  • `CollectionFieldSummary` with `CollectionFieldSummaryItem`: the total, what is allocated and what remains (isEmphasized: by size and weight, with the state in words).
  • Focus: adding announces the new item and focuses its first field; removing announces it and focuses the add button.

Lists filled elsewhere and only shown here (edited in a dialog, listed in a table) are a composition of data-grid/item and dialog, not this block.

Built-in text is in English; translate it with i18n.labels.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/collection-field

    Files land in components/fma-ds/collection-field/collection-field.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0