Bulk Selection
Select-all checkbox patterns for tables, lists, and bulk actions.
Overview
The data-select-all attribute creates a master checkbox that controls a group of related checkboxes. It supports:
- Check/uncheck all targets at once
- Indeterminate state when some items are selected
- Selected count display
- Custom events for building action bars
Table Selection
The most common pattern: a header checkbox that controls row checkboxes in a table.
<p>Selected: <strong data-selected-count>0</strong> items</p>
<table>
<thead>
<tr>
<th>
<input type="checkbox"
data-select-all=".row-select"
aria-label="Select all">
</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="row-select"></td>
<td>Alice Johnson</td>
<td>alice@example.com</td>
<td>Admin</td>
</tr>
<tr>
<td><input type="checkbox" class="row-select"></td>
<td>Bob Smith</td>
<td>bob@example.com</td>
<td>Editor</td>
</tr>
<tr>
<td><input type="checkbox" class="row-select"></td>
<td>Carol White</td>
<td>carol@example.com</td>
<td>Viewer</td>
</tr>
</tbody>
</table>
Checkbox List
Use data-select-all-scope to limit the scope. The master checkbox finds targets within the closest scope container.
<fieldset data-select-all-scope>
<legend>
<label>
<input type="checkbox" data-select-all=".option-check">
Select all files
</label>
</legend>
<div style="display: flex; flex-direction: column; gap: var(--size-xs);">
<label><input type="checkbox" class="option-check"> document.pdf</label>
<label><input type="checkbox" class="option-check"> photo.jpg</label>
<label><input type="checkbox" class="option-check"> spreadsheet.xlsx</label>
<label><input type="checkbox" class="option-check"> presentation.pptx</label>
</div>
</fieldset>
Action Bar
Listen to the select-all-change event to show/hide a bulk actions toolbar.
<div id="action-bar" hidden>
<layout-cluster data-layout-gap="m" data-layout-align="center">
<span><strong data-selected-count>0</strong> selected</span>
<button class="secondary s">Export</button>
<button class="danger s">Delete</button>
</layout-cluster>
</div>
<script>
const master = document.querySelector('[data-select-all]');
const bar = document.getElementById('action-bar');
master.addEventListener('select-all-change', (e) => {
bar.hidden = e.detail.checked === 0;
});
</script>
How It Works
- The
data-select-all value is a CSS selector for the target checkboxes
- Scope is determined by the closest
table, form, fieldset, or [data-select-all-scope] ancestor
- The
data-selected-count element (within scope) auto-updates with the count
- The
select-all-change event fires on the master checkbox with detail: { checked, total, selected }