SimpleFormIterator

The ready-made row UI for an ArrayInput: add, remove, reorder and a confirmed clear.

Installation

pnpm dlx shadcn@latest add @chelone/simple-form-iterator

The ready-made row UI for an ArrayInput: add, remove, reorder and a confirmed clear.

Props

Prop	Type	Default	Description
addButton	ReactElement<IteratorButtonProps, string \| JSXElementConstructor<any>>	—	Replaces the default Add button; it is cloned with the add `onClick`.
children	ReactNode	—	The inputs repeated in every row.
className	string	—	Extra classes on the iterator root.
disableAdd	boolean	—	Hides the Add button.
disableClear	boolean	—	Hides the clear button.
disabled	boolean	—	Hides every control (add, clear, remove, reorder).
disableRemove	boolean \| (index: number) => boolean	—	Hides the remove button, and the clear button with it. A function decides per row index.
disableReordering	boolean	—	Hides the reorder buttons.
getItemLabel	boolean \| (index: number) => ReactNode	—	A label per row. `true` numbers the rows from 1; a function returns the label for a row index; `false` renders none.
inline	boolean	—	Lays a row's inputs out in one line from the `sm` breakpoint up.
removeButton	ReactElement<IteratorButtonProps, string \| JSXElementConstructor<any>>	—	Replaces the default remove button; it is cloned with the remove `onClick`.
reOrderButtons	ReactElement<unknown, string \| JSXElementConstructor<any>>	—	Replaces the default reorder buttons; it reads the row via `useIteratorItem`.