# Bulk select and bulk bar

Select rows with checkboxes (header tick = all on the page, indeterminate when some); a navy bar rises at the bottom with the count and the bulk actions. Not-wired actions are shown as such.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Checkbox, Table
- **Build:** TanStack row selection + `Checkbox` + a floating bar.
- **In apps/admin today:** Checkbox exists.
- **Client component:** yes. 

## Content rules

- "3 selected" · "Select all 214 products".

## Do

- Offer Clear selection.

## Don't

- Hide the count.

## Motion

- Bar in/out on the toast motion (`--motion-toast-in/out`, rises 8px).

## Accessibility

- **Keyboard:** Space on a row checkbox; Shift+click range.
- **ARIA:** Count in `aria-live`; header checkbox `aria-checked="mixed"`.
- **Focus:** Bar actions reachable by Tab after the table.

## Tokens

`--font-voice` `--font-stretch-title` `--r-control` `--input-hover` `--s-5` `--z-pop` `--s-2` `--s-4` `--primary` `--primary-foreground` `--r-card` `--e-toast` `--toast-shift` `--motion-toast-out` `--motion-handoff` `--motion-toast-in` `--text-card` `--w-semibold` `--s-1` `--s-3` `--e-phone-sheet` `--motion-sheet-out` `--motion-sheet-in` `--text-14` `--control-h-m`

## Files

`bulk-bar.html` live specimen · `bulk-bar.css` kit rules · `bulk-bar.d.ts` props · full page: `docs/components/bulk-bar/` (phone: `m/`).