Back to elements
ElementForm & InputFree
Repeatable Field Group React component
A set of fields people can repeat: add a row, remove one, drag rows into order. Rows grow in and slide out, focus lands in the new row, Enter in the last row adds another, and min / max limits keep the list in bounds.
When to use the Repeatable Field Group component
Use Repeatable Field Group when people enter a list of similar things of unknown length: invites, links, phone numbers, line items, key / value pairs, custom fields.
For a list of existing items to sort, use Sortable List. For picking from known options, use Multi Select or Checkbox Group.
Installation
Add the Repeatable Field Group component to your project with the shadcn CLI. It lands in components/repeatable-field-group.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add https://reactframe.com/r/repeatable-field-group.jsonOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion clsx tailwind-mergeFAQ
- How does reordering work?
- Each row has a handle; drag it up or down and the other rows make room. Set reorderable={false} to hide the handles.
- Can I limit the number of rows?
- Yes. min stops removal below that count and max disables the add button; the counter shows how many are left.
- Is it keyboard friendly?
- New rows get focus in their first field, Enter in the last row adds another, and removing a row moves focus to the one that took its place.
