Selection and bulk actions
Choosing several rows and acting on them together.
When people act on many rows at once, each row gets a checkbox, the header can select every loaded row, and a bar appears saying how many are selected with the actions that apply.
The problem
Some jobs repeat across many rows: stopping sharing with several people, sharing back with everyone who shares with you. One row at a time is slow. But when many rows are picked at once, it's easy to lose track of what's selected, and Bridge has no undo, so a removal applied to the wrong set can't be taken back.
What to do
- A checkbox on every row. Selected rows are tinted. "Select all" in the header picks every row that's loaded.
- A bar says how many. While anything is selected, a bar shows "{n} selected", Clear, and the actions that apply: red for one that takes something away, blue for the main one.
- Confirm removals, with the count. A bulk removal asks first, naming how many: "Stop sharing with 3 people?". When it's done, the rows change in place and the selection clears.
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| Stop sharing with several people | Select them, then the bar's red Stop sharing; ConfirmDialog with the count | Sharing → Sharing with: "Stop sharing with 3 people?" |
| Share back with several people | Select them, then the bar's blue Share back. Nothing is taken away, so no confirmation | Sharing → Sharing with you: the rows turn Mutual |
| Act on just one row | The row's own button, not selection | Invite back, Share back on the row |
| Act on everything loaded | The header's Select all | Select all → "5 selected" |
| Change your mind | Clear in the bar, or untick the rows | Clear |
See it work
Live examples built from the package on the sample network. Click through them.
Several at once, confirmed with the count
Tick a few people. The bar appears; Stop sharing asks first, then the rows leave the list and the selection clears. The checkboxes are the package Checkbox; DataTable doesn't have row selection built in yet.
Sharing with
- Mutual
Leah Okonkwo
Partner, Saltmarsh Partners
Priya Natarajan
Co-founder & CEO, Quillbase
Kwame Asante
CEO, Halcyra Bio
- Mutual
Mei Lin Zhou
Founder & CEO, Ferrolink
Daniel Osei
Co-founder & CTO, Quillbase
A bulk action that takes nothing away
Share back is the bar's main action, so it's blue and needs no confirmation. The rows turn Mutual and the selection clears. Tick some rows to see Select all part-ticked (approved; Bridge OS doesn't show it yet).
Sharing with you
- Mutual
Marcus Bell
General Partner, Lanternfield Capital
Hannah Weiss
Angel investor
Fatima Al-Sayed
Co-founder & COO, Furrowmint
Tomás Herrera
Principal, Juniper Row Ventures
What to write
| Part | Rule | Example |
|---|---|---|
| Bar count | The number, then "selected". | 3 selected |
| Clear | Always "Clear". | Clear |
| Bulk action | The same verb as the row's own action. | Stop sharing, Share back |
| Confirm title | A question with the verb and the count; "person" for one, "people" for more. | Stop sharing with 3 people? |
| Row checkbox | Named for the row. | Select Leah Okonkwo |
| Header checkbox | "Select all". | Select all |
Approved, not built yet
- "Select all" shows a part-selected state when only some rows are selected, and says whether it means this page or every match.
- DataTable gains a built-in selection option (checkbox column + selection bar), so tables don't build it by hand.
Accessibility
- Each row's checkbox has a name that says whose row it is ("Select Leah Okonkwo"); the header's is "Select all".
- A selected row shows a tick as well as the tint, so color is never the only signal.
- Every checkbox has a hit area of at least 28px, Bridge's smallest target.
- The bulk confirmation is a ConfirmDialog: focus starts on Cancel, and nothing can close it while the action runs.
| Keys | What happens |
|---|---|
| Tab | Moves between the checkboxes, the bar's buttons and each row's own action. |
| Space | Ticks or unticks the focused checkbox. |
| Enter / Space | Presses the focused button. |
| Esc | Closes the confirmation without acting (not while the action is running). |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| Checkbox | One per row, named for the row, and "Select all" in the header, part-ticked when only some rows are chosen. |
| Button | destructive for a bulk removal, primary for the main bulk action, link for Clear, secondary for a row's own action. |
| ConfirmDialog | Asks before a bulk removal, with the count in the question. |
| Tag | Shows each row's new state afterward, such as Mutual. |
| DataTable | Where row selection will be built in (approved, not built yet). |
Not decided yet
Proposals for Aman to approve, change or reject. Not rules.
- What happens to a selection when the search changes. Today the sharing table keeps rows selected after a search hides them, and the bulk action still applies to them. Proposal: clear the selection when the search changes.
- Announce the "{n} selected" count to screen readers when it changes.
Where Bridge OS differs today
Follow this page, not the gap.
- The sharing table's bulk Stop sharing uses the browser's
confirm(); it moves to ConfirmDialog. - The sharing table's checkboxes are 14px with no bigger hit area, below the 28px minimum. Checkbox fixes both.
- The sharing table's Clear is a hand-made text button, not Button.
Sources
- Bridge OS
sharing-table.tsx - Decision 2026-11-02 (confirm first); ConfirmDialog
- DESIGN.md → 9. Accessibility
- Proposals approved by Aman 2026-11-02.