Multi Select List Action Bar

ProNew

A list with a Select mode that shows checkboxes, a Select all control, a live count and a bottom action bar with bulk actions that appears only while something is selected. Use this when people act on many list items at once on a phone, such as moving, archiving or deleting photos or messages.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when people act on many list items at once on a phone, such as moving, archiving or deleting photos or messages.

Do not use it for acting on one item (use swipe actions or a menu) or for lists with no bulk actions.

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

Prop	Type	Default	Description
`items`	`{ id: string; label: string }[]`	`required`	Rows.
`actions`	`{ id: string; label: string; destructive?: boolean }[]`	`required`	Bulk actions.
`onAction`	`(action: string, ids: string[]) => void`	`required`	Called with the action and the selected ids.

Accessibility

Select toggles a mode, announced as "Selection mode on"; checkboxes then appear and each is named by its row.
Select all is a tri-state checkbox (checked, unchecked, indeterminate) and the count is a polite status ("2 selected").
The action bar is a named region; actions are disabled only when nothing is selected, and Done leaves the mode and returns focus to Select.

Testing

The pattern ships with a Testing Library test (multi-select-list-action-bar.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when people act on many list items at once on a phone, such as moving, archiving or deleting photos or messages.

Do not use it for acting on one item (use swipe actions or a menu) or for lists with no bulk actions.

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

Prop	Type	Default	Description
`items`	`{ id: string; label: string }[]`	`required`	Rows.
`actions`	`{ id: string; label: string; destructive?: boolean }[]`	`required`	Bulk actions.
`onAction`	`(action: string, ids: string[]) => void`	`required`	Called with the action and the selected ids.

Accessibility

Select toggles a mode, announced as "Selection mode on"; checkboxes then appear and each is named by its row.
Select all is a tri-state checkbox (checked, unchecked, indeterminate) and the count is a polite status ("2 selected").
The action bar is a named region; actions are disabled only when nothing is selected, and Done leaves the mode and returns focus to Select.

Testing

The pattern ships with a Testing Library test (multi-select-list-action-bar.test.tsx) that drives it through roles and the keyboard.