Soracom

Design System
  1. Home
  2. Design system
  3. Ux patterns
  4. Repeatable editable rows

Repeatable editable rows

Implementing adding/deleting of repeatable editable rows in a form

Overview

When implementing repeatable, editable rows the following formats should be used

Initial empty state

By default, with no saved values:

Always
  1. Show 1 row of blank fields
  2. The delete button must be disabled
  3. The Add row button must be disabled
html
Copy

Once text is entered into the first row:

Always
  1. Enable the delete button
  2. Enable the Add row button

With text entered

html
Copy

Deleting a row:

Clicking the ‘Delete row’ button, should:

Always
  1. If row fields have values, show a confirmation dialog to delete the row
  2. If there is only 1 row, delete the contents of the fields
  3. If there is only 1 row, disable the Delete row button and the Add row button
  4. If there is more than one row, delete the current row

Add a row:

Clicking the ‘Add row’ button, should:

Always
  1. Add a new empty row at the bottom of the list
  2. Disable the ‘Add row’ button

With text entered

html
Copy

Examples

Using ds-table

Using ds-table is useful when implementing more than 2 fields per row, or the requirement for column labels.

html
Copy

Using ds-list

For simple key-pairs, ds-list requires the least markup.

html
Copy