Menu Bulk Select

ProNew

The select-all control of a table header: a tri-state checkbox joined to a menu with All, None and Invert, both announcing how many rows are selected.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

noun

Guide and examples

When to use it

Use this in the header of selectable tables and lists where people select many rows: invoices, emails, contacts.

Do not use it for single-selection lists. Selecting rows across pages needs its own "select all N results" step.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

MenuBulkSelect

Prop	Type	Default	Description
`allIds`	`string[]`	-	Every selectable row.
`selected`	`string[]`	-	Selected ids.
`onSelectedChange`	`(selected: string[]) => void`	-	Called with the new selection.
`noun`	`string`	`rows`	Plural noun used in the labels.

Accessibility

The checkbox reports aria-checked="mixed" when only some rows are selected.
The arrow button's name carries the numbers ("Selection options, 1 of 4 invoices selected").
Invert selection is the item most tables forget and the quickest way to select everything but a few rows.

Keyboard

Key	Action
Space on the checkbox	selects all or none
Enter or ArrowDown on the arrow	opens the menu

Testing

The pattern ships a Testing Library test (menu-bulk-select.test.tsx) that covers the mixed state, select all and none, invert and the count in the name.

Guide and examples

When to use it

Use this in the header of selectable tables and lists where people select many rows: invoices, emails, contacts.

Do not use it for single-selection lists. Selecting rows across pages needs its own "select all N results" step.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

MenuBulkSelect

Prop	Type	Default	Description
`allIds`	`string[]`	-	Every selectable row.
`selected`	`string[]`	-	Selected ids.
`onSelectedChange`	`(selected: string[]) => void`	-	Called with the new selection.
`noun`	`string`	`rows`	Plural noun used in the labels.

Accessibility

The checkbox reports aria-checked="mixed" when only some rows are selected.
The arrow button's name carries the numbers ("Selection options, 1 of 4 invoices selected").
Invert selection is the item most tables forget and the quickest way to select everything but a few rows.

Keyboard

Key	Action
Space on the checkbox	selects all or none
Enter or ArrowDown on the arrow	opens the menu

Testing

The pattern ships a Testing Library test (menu-bulk-select.test.tsx) that covers the mixed state, select all and none, invert and the count in the name.