Table Row Selection
A performant, accessible pattern for selecting one or more rows in a data table with visual feedback, keyboard navigation, and bulk actions.
Live Preview
3 of 12 selected| Name | Role | Status | |
|---|---|---|---|
| Aria Chen | Admin | Active | |
| Marcus Webb | Editor | Active | |
| Priya Kapoor | Viewer | Invited | |
| Lena Osei | Editor | Active | |
| David Ruiz | Viewer | Inactive |
Checkbox Column
Place a select-all checkbox in the header row and individual checkboxes in each data row. Use an indeterminate state when some but not all rows are selected.
Visual Feedback
Highlight selected rows with a subtle background tint. Our violet accent at 10% opacity provides clear distinction without overwhelming the data. Keep hover states distinct from selection.
Bulk Action Bar
Reveal a contextual toolbar above or below the table when one or more rows are selected. Show the count of selected items and primary actions like delete, export, or assign. Hide the bar entirely when nothing is selected.
Keyboard
Support Space to toggle the focused row and Shift + click for contiguous range selection. Announce selection changes to screen readers via a live region.