Selection Patterns
Last updated:
Practical patterns for single and multi-select that stay visible, accessible, and predictable.
01 — Foundation
Selection should feel deliberate
Good selection UX is predictable. Bad selection UX creates uncertainty immediately.
Selection systems let users choose items, rows, or options confidently. Users should always understand what is selected, how to change it, whether multiple selection exists, and which actions become available.
02 — State
Visible selection state
Hidden selection is accidental deselection waiting to happen.
- clear selected styling — not colour alone; include icons or checkmarks where helpful
- show count when multiple items are selected — “3 invoices selected”
- checkboxes for multi-select lists; radio behaviour when only one choice is allowed
- large enough click targets — rows, not 12px boxes in the corner
<table>
<thead>
<tr>
<th scope="col"><input type="checkbox" aria-label="Select all" /></th>
<th scope="col">Invoice</th>
</tr>
</thead>
</table>03 — Interaction
Predictable toggling
Avoid overloaded zones where every click does something different.
- clicking a row selects; clicking a link in the row navigates — separate targets
- shift-click and select-all behave as users expect on desktop
- do not clear selection silently when filters change — warn or persist intentionally
04 — Accessibility
Keyboard and assistive technology
Selection patterns must work without a precise mouse.
- keyboard access to select, deselect, and move between items
- announce selection changes without spamming — batch when selecting many rows
- visible focus on the active row or control
05 — Review
Before you approve
A short checklist for selection patterns in code review.
- selected state is obvious; scope of selection is clear
- multi vs single select is understandable
- pairs with Bulk Actions when mass operations are offered