Overview
When implementing repeatable, editable rows the following formats should be used
Initial empty state
By default, with no saved values:
- Show 1 row of blank fields
- The delete button must be disabled
- The Add row button must be disabled
<div class="ds-rows --gap-xsmall">
<ul class="ds-list --plain --no-h-indent">
<li>
<div class="ds-input">
<input type="text" placeholder="Key">
</div>
<div class="ds-input">
<input type="text" placeholder="Value">
</div>
<button class="ds-button --left --hide-label --icon-delete --plain" disabled>
<span>Delete row</span>
</button>
</li>
</ul>
<button class="ds-button --small --icon-plus" disabled>
<span>Add row</span>
</button>
</div>Once text is entered into the first row:
- Enable the delete button
- Enable the Add row button
<div class="ds-rows --gap-xsmall">
<ul class="ds-list --plain --no-h-indent">
<li>
<div class="ds-input">
<input type="text" placeholder="Key" value="My key">
</div>
<div class="ds-input">
<input type="text" placeholder="Value">
</div>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</li>
</ul>
<button class="ds-button --small --icon-plus">
<span>Add row</span>
</button>
</div>Deleting a row:
Clicking the ‘Delete row’ button, should:
- If row fields have values, show a confirmation dialog to delete the row
- If there is only 1 row, delete the contents of the fields
- If there is only 1 row, disable the Delete row button and the Add row button
- If there is more than one row, delete the current row
Add a row:
Clicking the ‘Add row’ button, should:
- Add a new empty row at the bottom of the list
- Disable the ‘Add row’ button
<div class="ds-rows --gap-xsmall">
<ul class="ds-list --plain --no-h-indent">
<li>
<div class="ds-input">
<input type="text" placeholder="Key" value="My key">
</div>
<div class="ds-input">
<input type="text" placeholder="Value" value="My value">
</div>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</li>
<li>
<div class="ds-input">
<input type="text" placeholder="Key">
</div>
<div class="ds-input">
<input type="text" placeholder="Value">
</div>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</li>
</ul>
<button class="ds-button --small --icon-plus" disabled>
<span>Add row</span>
</button>
</div>Examples
Using ds-table
Using ds-table is useful when implementing more than 2 fields per row, or the requirement for column labels.
<div class="ds-rows --gap-xsmall">
<table class="ds-datatable --plain --no-indent --gap-xsmall">
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>Value</th>
<th class="--min"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="ds-input">
<input type="text" value="My type">
</div>
</td>
<td>
<div class="ds-input">
<input type="text" value="My name">
</div>
</td>
<td>
<div class="ds-input">
<input type="text" value="My value">
</div>
</td>
<td>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</td>
</tr>
<tr>
<td>
<div class="ds-input">
<input type="text">
</div>
</td>
<td>
<div class="ds-input">
<input type="text">
</div>
</td>
<td>
<div class="ds-input">
<input type="text">
</div>
</td>
<td>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</td>
</tr>
</tbody>
</table>
<button class="ds-button --small --icon-plus">
<span>Add row</span>
</button>
</div>Using ds-list
For simple key-pairs, ds-list requires the least markup.
<div class="ds-rows --gap-xsmall">
<ul class="ds-list --plain --no-h-indent">
<li>
<div class="ds-input">
<input type="text" placeholder="Key" value="My key">
</div>
<div class="ds-input">
<input type="text" placeholder="Value" value="My value">
</div>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</li>
<li>
<div class="ds-input">
<input type="text" placeholder="Key">
</div>
<div class="ds-input">
<input type="text" placeholder="Value">
</div>
<button class="ds-button --left --hide-label --icon-delete --plain">
<span>Delete row</span>
</button>
</li>
</ul>
<button class="ds-button --small --icon-plus">
<span>Add row</span>
</button>
</div>