Collection Field
A list edited in place inside a form: the user adds an item and fills it right there (payment methods, lots, recipients).
Overview
Rows, state and validation stay in the app (useFieldArray's fields, append, remove).
- `CollectionField`: takes the
label(a legend),description, the list'serror,itemCount,onAddandaddLabel.minItemsremoves the remove buttons at the minimum,maxItemsswaps the add button for a note once reached, and an empty list showsemptyMessage. - `CollectionFieldItem`:
labelis numbered ("Lot 2") and also names its remove button;onRemoveremoves it. Two layouts:rowfor a few fields side by side on wide screens, with the remove button at the end;groupfor 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
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
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