Website pattern library

Forms

Add multiple items

When the user is required to add or upload more than one item containing multiple fields, you can output the added items back to the user in a table.

Example showing 2 items added (people) and the field data inside the expandable table:

Success!You successfully added a person

Joe Bloggs Trash iconDelete Edit iconEdit Show
Joe Bloggs Trash iconDelete Edit iconEdit Show
  • Show toggles the data table
  • Edit takes the user back to step 2 with populated form fields
  • Delete removes the item and associated data table. If all items are deleted consider a confirmation alert before deletion.

Follow the links in the 'Usage' section on this page to see some examples.