Multi Select Toolbar Table
Contacts table with per row checkboxes, a select all header, and a contextual bulk action toolbar.
Contacts table with per row checkboxes, a select all header, and a contextual bulk action toolbar.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Multi Select Toolbar Table is the contacts table with real bulk-select interaction: seven rows with per-row Checkbox components wired to useState, a select-all header checkbox that goes indeterminate when a subset is ticked, and a contextual toolbar that appears as soon as any row is selected showing the count (e.g. "2 selected") plus Archive, Export, and Delete actions. Riley Parker carries a Suspended badge; Maya Chen an Invited outline badge.
Selection state lives in a Set keyed by email. The footer note calls out that Delete is permanent while Archive keeps the record, the distinction that matters when the confirm dialog is not in frame.
Reach for this block on any list page where users need to act on multiple records at once. Wire the Checkbox onCheckedChange handlers to your selection store and the toolbar action buttons to your bulk API endpoints.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the contacts bulk-management list. Other multi-select tables:
Tip: show the toolbar only when rows are selected; a permanently visible bulk bar implies every row is always a candidate for deletion, which raises the threat level.